                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery基礎(四)—動畫篇

var $aaron = $("#aaron"); 請問這句代碼是什么意思？

qq_影子_23

2016-07-19

源自：jQuery基礎(四)—動畫篇 5-1

關注問題我要回答

1251

操作

收起

5 回答

淡水狗
2017-07-22

這個意思是賦予$aaron 等于jq對象$("#aaron")；這樣的話?$aaron.animate({ ........ }) =$("#aaron").animate({ ........ })?

其實可以不用這么寫也行。直接把那句代碼刪了。

那下面就是判斷語句是$("#aaron").animate({ ........ })。?

?這個命名不一定是$aaron、你可以自己命名。比如“a”、"b"、等等等。。。。

例如：

?<style>
????p?{
????????color:?red;
????}
????div{
????????width:200px;?
????????height:?100px;?
????????background-color:?yellow;
??????
????????border:1px?solid?red;
????}
????</style>
????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
????<h2>animate(上)</h2>
????<p>慕課網,專注分享</p>
????<div?id="aaron">內部動畫</div>
????點擊觀察動畫效果：
????<select?id="animation">
????????<option?value="1">動畫1</option>
????????<option?value="2">動畫2</option>
????????<option?value="3">動畫3</option>
????????<option?value="4">動畫4</option>
????</select>
????<input?id="exec"?type="button"?value="執行動畫">
????<script?type="text/javascript">
????$("#exec").click(function(){
??????var?v?=$("#animation").val();?//賦予變量v為option的value值
??????var?a?=$("#aaron");//賦予a為元素aaron
??????if(v?==?"1"){?
??????????a.animate({?
??????????????width:300,
??????????????height:300,
??????????????borderWidth:"4"?
?????//所有用于動畫的屬性必須是數字的，你這里這么寫border:'4px?soli?red'，邊框的顏色和類型不是數值類型的。所以只能用borderWidth，borderBottomWidth，borderLeftWidth，borderRightWidth，borderTopWidth，borderSpacing
??????????})
??????}
??????else?if(v?==?"2"){?
??????????a.animate({
??????????????left:?50,?//需把元素定義絕對相對定位?position:relative;才有效
??????????????width:"+=100",//在現有的寬度基礎上增加100px
??????????????height:"+=100",
??????????})
??????}
??????else?if(v?==?"3"){
??????????a.animate({
??????????????fontSize:"5em"
??????????})
??????}
??????else?if(v?==?"4"){
??????????a.animate({
???????????opacity:?'hide'//或者opacity:0
??????????},function(){
??????????????alert('動畫執行完畢')
??????????}
??????????)}
????})
???
???
??
????</script>
</body>