jQuery Animate

自带动画

Speed可取"slow"、"fast"或毫秒。

显示、隐藏、显示隐藏交替

$(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback);

淡入、淡出、淡入淡出交替、淡出到指定透明度

$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);$(selector).fadeToggle(speed,callback);$(selector).fadeTo(speed,opacity,callback);

上滑、下滑、上滑下滑交替

$(selector).slideDown(speed,callback);$(selector).slideUp(speed,callback);$(selector).slideToggle(speed,callback);

自定义动画

Jquery中试用animate方法创建自定义动画。

Animate()

语法：$(selector).animate({params},speed,callback);

Params(必需)： 参数定义形成动画的CSS属性。

Speed(可选)： 参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

Callback(可选)： 参数是动画完成后所执行的函数名称。

在属性中可以使用绝对值和相对值和预定义值：

绝对值：

$("div").animate({left:'250px'});滑动到指定像素位置。

相对值：

$("div").animate({left:'+250px'});相对于当前值增加。

预定义值：show，hide，tooggle

$("div").animate({height:'show'});

动画队列

1.当多个相同元素的animate排列，会依照先后顺序依次执行动画效果。

$("button").click(function(){  var div=$("div");  div.animate({height:'300px',opacity:'0.4'},"slow");  div.animate({width:'300px',opacity:'0.8'},"slow");  div.animate({height:'100px',opacity:'0.4'},"slow");  div.animate({width:'100px',opacity:'0.8'},"slow");});

2.当轮流次数较少可以将一个动画放在另一个动画的回调函数里。

$(“#block1″).animate({left:”+=100″},function() {$(“#block2″).animate({left:”+=100″},function() {$(“#block1″).animate({left:”+=100″},function() {$(“#block2″).animate({left:”+=100″},function() {$(“#block1″).animate({left:”+=100″},function(){alert(“动画结束”);});});});});});

2.利用queue和dequeue。

var FUNC=[function() {$("#block1").animate({left:"+=100"},aniCB);},function() {$("#block2").animate({left:"+=100"},aniCB);},function() {$("#block1").animate({left:"+=100"},aniCB);},function() {$("#block2").animate({left:"+=100"},aniCB);},function() {$("#block1").animate({left:"+=100"},aniCB);},function(){alert("动画结束")}];var aniCB=function() {$(document).dequeue(“myAnimation”);}$(document).queue(“myAnimation”,FUNC);

清空队列：

 $(document).queue(“myAnimation”,[]);

添加新动画：

$(document).queue(“myAnimation”,function(){alert(“动画真的结束了！”)});