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的正方体

 

 

})