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

})