jquary 動畫j

   1） 點擊 id爲d1的正方體，將其後全部class爲div1的正方體背景色設置爲綠色。

 

       代碼以下：      　　

                    <div class="div1" > </div>

                    <div class="div1"> </div>

                    <div class="div1" > </div>

                    <div class="div1"  id="d1"> </div>

                    <div class="div1" > </div>

                    <div class="div1"> </div>

                    <div class="div1"  id="div2"> </div>

                    <div class="div1"> </div>

 

    在jquary裏設置背景色：

         $('#di').click(function(){

        $(this).nextall('.div1').css("background-color","green")

})   

 

    2） 點擊 id爲d1的正方體，而後將其後id爲d2的正方體設置爲綠色

      代碼以下： 

    

    在jquary裏設置背景色：

         $('#di').click(function(){

        $(this).nextall('.div2').css("background-color","green")

})   

  3）點擊 id爲d1的正方體，而後將其後第一個class爲div1的 正方體設置爲綠色

    $('#di').click(function(){

        $(this).nextall('.div1:evq(0)').get(0).style.backgroundColor="green"

})   

 

  動畫效果：

 1）點擊id爲button的按鈕，class爲div1的正方體緩慢隱藏或展開

      代碼以下：

        <input type="button" id=button/>

       <div class="div1" style="width:100px;height:100px; background-color:red"></div>

 

     點擊按鈕實現功能：

      $('#button').click(function(){

     if( $('.div1').css(display=="none")){                                        //判斷是否已經隱藏，若是隱藏則緩慢展開不然隱藏

      $('.div1').slidedown()        

      }                                                                                            註釋：slideup:是緩慢向上收起 （隱藏） ，若是是slidedown則是緩慢向下展開（顯示）

      else{

         $('.div1').slideup()        

  }

})

 

 2）淡入淡出

   $('#button').click(function(){

     if( $('.div1').css(display=="none")){                                        //判斷是否已經隱藏，若是隱藏則緩慢展開不然隱藏

      $('.div1').fadein()        

      }                                                                                            註釋：fadein:是淡淡隱藏 ，若是是fadeout則是淡淡展開

      else{

         $('.div1').fadeout()        

  }

})

 

3）自定義動畫：animate

  $('#button').click(function(){

     $('.div1').animate ({ top:"100";left:"100" }，1000)              就是在1000ms內將class爲div1的正方體慢慢移動到距離頂部100px，距離左邊100培訓的地方，

                                                                                               若是將top，left改爲width，height則是在1000ms內逐漸拉伸到寬100，高100的正方體

 

 

})