jQuery动画效果

常用方法:

• show()和hide()方法，可以修改元素的多个样式，高度，宽度，不透明度。
• fadeIn()方法和fadeOut()方法，只改变元素的不透明度。
• slideUp()方法和slideDown()方法，只改变元素的高度。
• 自定义动画:animate(params,speed(可选),callback(可选)).

    PS:$(this).animate({left:"+=500px"},300);//当前位置累加500px 

    注意：影响方向样式属性时，必须先把元素的position设置为"relative"或者"absolute".

注意：任何动画效果，都可以指定3种速度参数：slow(0.6s),normal(0.4s)和fast(0.2s).或者指定事件参数,例如：show(1000).

动画方法概括

 

方法名	说明
Hide()跟show()	同时修改多个样式属性：高度、宽度、不透明度
fadeIn(),fadeout()	只修改不透明度
slideUp()和slideDown()	只改变高度
fadeTo()	只改变不透明度
Toggle()	用来替代hide()方法和show()方法，所以会同时修改多个样式属性即高度宽度和不透明度
slideToggle()	用来代替slideUp()和slideDown()方法，所以只能改变高度
Animate()	属于自定义动画的方法，以上各种动画方法实质上都掉了了animate()方法，直接使用animate()方法还能自定义其他的属性样式，例如left,marginLeft,scrollTop等

动画队列

（1）一组元素上的动画效果。

     a)当在一个animate()方法中应用多个属性时，动画是同时发生的。

     PS:$(this).animate({left:"500px",height:"200px"},3000);

     b)当以链式的写法应用动画方法时，动画是按照顺序发生的。

     PS: $(this).animate({left:"500px"},3000)

                    .animate({height:"200px"},3000);

(2)多组元素上的动画效果

       a)默认情况下，动画都是同时发生的。

       b)当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

       注意： callback回调函数适用于所有动画效果方法。

另外，在动画方法中，要注意其他非动画的方法会插队，例如css()方法，默认效果是刚开始执行动画的时候，css()方法就被执行了，要使这些非动画的方法也按照顺序来执行，需要把这些方法写在动画方法的回调函数中。

PS:$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){

         $(this).css(“border”,”1px solid blue”);

});//这个效果css会最后执行

PS:$(this).slideDown("normal",function(){

               //动画效果完成后做其他的事情          }):

 

• 若想要动画停止，需要在animate()方法前插入stop()方法

例如:$(“#id”).stop().animate()注意stop中的两个参数。

• 判断元素是否在动画状态的方法时：

PS:if(!$(element).is(“:animated”)){

//如果当前没有进行动画，则添加新动画

}

如果想对动画进行延迟操作，可以使用delay()方法.

PS:$(this).animate({left:"400px",height:"200px"},3000)

             .delay(1000);