jQuery中的动画

show(param)和hide(param)方法

$("element").hide() 的效果和 $("element").css("display", "none") 效果相同。

注意在hide()方法将"内容"的display属性值设置为"none"之前，会记住原先的display属性值。

参数：param 可选。 "slow"(0.6),"normal"(0.4), "fast"(0.2)或者时间以毫秒为单位。

hide()方法减少内容的高度，宽度和不透明度，然后再将display设置为"none"。

fadeIn()和fadeOut()方法

fadeIn()方法增加元素的不透明度(淡入)，fadeOut()方法减少元素的不透明度(淡出)。

 

 

slideUp()和slideDown()方法

slideUp()方法减少元素的高度，slideDown()方法增加元素的不高度。

 

自定义动画方法animate

animate(params, speed, callback);

参数说明：

params: 一个包含样式属性及值的映射，比如{property1:"values1", property2:"values2",...}.

speed: 速度参数，可选。

callback:在动画完成时执行的函数，可选。

在3秒内向左移动到500px;

$(function(){

    $("#panel1").click(function(){

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

})

})

 

在3秒内相对自身向左移动了500px;

$(function(){

    $("#panel1").click(function(){

      $(this).animate({left : "+=500px"}, 3000);

})

})

 

多重动画

1，同时执行多个动画

$(function(){

   $("#myImg").click(function(){

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

});

})

效果：元素在向右滑动的同时，放大元素的高度。

2，顺序执行多个动画(动画队列)

 $(function(){

   $("#myImg").click(function(){

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

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

});

})

效果：元素在向右滑动后，放大元素的高度。

 

动画完成后的回调函数

比如调用css函数: $(this).css("border", "5px solid blue");

 

停止动画和判断是否处于动画状态

stop([clearQueue], [gotoEnd]),参数clearQueue和gotoEnd都是可选的参数。为boolean值。（解决动画队列的问题）

 clearQueue：是否要清空未执行完的动画队列。

 gotoEnd：代表是否直接将正在执行的动画跳转到末状态。

 

$(element),is(":animated") 判断元素是否处于动画状态。