jquery中动画的用法

jQuery自定义动画

jQuery对象.animate({动画参数}, 时间, 运动的形式, 回调);

• 动画参数：css样式 {width: 500, height: 500}

• 时间： number(单位是毫秒) ‘fast’(200ms) ‘normal’(400ms) ‘slow’(600ms)

• 运动的形式： “swing” - 慢快慢 “linear” - 匀速

• 回调：函数中的this就是运动的元素

• 时间不写默认400ms, 运动形式默认swing

<script src="js/jquery.js"></script>
<script>
    var box = $('#box');
    //......
</script>

1、普通动画

 box.click(function(){
    box.animate({width:500},3000)
 });

2、多重动画—两者同时进行

 box.click(function () {
     box.animate({
         width:500,
         height:500
         },3000);
 });

3、链式动画—按顺序执行

 box.click(function(){
     box
     .animate({width:500},3000)
     .animate({height:500},3000)
     .animate({opacity:0},3000)
 });

4、动画队列—将一个普通样式变化插到动画队列，next()调用才会继续下一个动画

 box.click(function(){
     box
     .animate({width:500},3000)
     .queue(function(next){
         $(this).css('background','yellow');
         next();
     })
     .animate({height:500},3000)
     .animate({opacity:0},3000)
 });

5、阻止动画进入动画队列–就是不排队，后面的第一个就可以和他同时进行

 box.click(function(){
     box
     .animate({width:500},{queue:false , duration:3000})
     .animate({height:500},3000)
     .animate({opacity:0},3000)
 });