Jquery——动画效果

jquery中常用的动画的方法就是hide()与show().

$(element).hide()这段代码可以与这相等element.css("display","none")

 在hide(time)与show(time)中填入事件，可以慢慢消失跟显现。可以修改元素的多个样式，高度，宽度，不透明度。

另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是，当使用hide或者show的时候会改变网页的高度，而fadeIn与fadeOut则不会。

 

                $("#panel h5.head").toggle(function(){                     $(this).addClass("highlight");                     $(this).next().fadeOut(1000);                 },function(){                     $(this).removeClass("highlight");                     $(this).next("div .content").fadeIn(1000);                 });

 

还有一组是slideUp，slideDown改变高度。

 

动画方法概括

 

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

 

动画队列

 

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

 

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

 

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

 

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

 

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

 

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

 

另外，在动画方法中，要注意其他非动画的方法会插队，例如css()方法，要使这些非动画的方法也按照顺序来执行，需要把这些方法写在动画方法的回调函数中。

 

举一个animate的例子：

 

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

 

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

 

});

 

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

 

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

 

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

 

$(element).is(“:animated”);