jQuery动画效果和动画队列

一.基础效果

.hide([duration][,easing][,complete])

用于隐藏元素，没有参数的时候相当于直接设置display属性

$('.box').hide()
//相当于
$('.box').css('display','none')

.show([duration][,easing][,complete])

用于显示元素，用法与hide相似

$('.show').on('click',function(){
  $('.box').show()
})

.toggle([duration][,easing][,complete])

用来切换显示和隐藏元素

$('.toggle').on('click',function(){
  $('.box').toggle(300);
});

二.渐变效果

.fadeIn([duration][,easing][,complete])

通过淡入的方式显示元素

$('.fadeIn').on('click',function(){
  $('.box').fadeIn('slow')
})

.fadeOut([duration][,easing][,complete])

通过淡出的方式隐藏匹配元素

$('.fadeOut').on('click',function(){
  $('.box').fadeOut('slow');
});

.fadeTo(duration,opacity[,easing][,complete])

调整匹配元素的透明度，该方法通过调整元素的不透明度去做效果

$('.fadeTo').on('click',function(){
  $('.box').fadeTo('slow',0.2);
});

.fadeToggle([duration][,easing][,complete])

匹配元素切换淡入(显示)和淡出(隐藏)的效果

$('.fadeToggle').on('click',function(){
  $('.box').fadeToggle('slow');
});

三.滑动效果

.slideDown( [duration ] [, easing ] [, complete ] )

用滑动动画的效果显示匹配的元素

$('.slideDown').on('click',function(){
  $('.box').slideDown('slow');
});

.slideUp( [duration ] [, easing ] [, complete ] )

用滑动动画的效果隐藏匹配的元素

$('.slideUp').on('click',function(){
  $('.box').slideUp('slow');
});

.slideToggle( [duration ] [, easing ] [, complete ] )

用滑动动画显示或隐藏一个匹配元素

$('.slideToggle').on('click',function(){
  $('.box').slideToggle('slow');
});

具体的动画演示：http://js.jirengu.com/xagoj/2/

四.动画队列

问题一：动画是同步还是异步的？

$('.hide').on('click',function(){
  $('.box').hide(1400);
  console.log('hide');
})

在上面这个例子中，执行代码后，如果是同步，应该是动画完成后控制台输出hide，但如果是异步，应该是动画还没有完成时，控制台已经输出hide（如果不是很明显，适当的增加时间）

结果是当动画还没有完成时，控制台就已经输出了hide，这说明动画是异步的

问题二：如果我想要动画完成后在输出，这样要怎么写？

我们只需要在动画方法中添加一个回掉函数

$('.hide').on('click',function(){
  $('.box').hide(1400,function(){
       console.log('hide');
});
})

可是如果我想让很多的效果一个个依次展示，是不是要这样（看下面的例子）

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})

这就叫回调地狱写法。。。。
我们可以换一种写法叫做jQuery动画队列的写法

$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('动画执行完毕了')
    })

动画队列其实就是动画队列执行的一个顺序机制，对于同一对象的动画效果会按照顺序放入到动画队列中，在动画队列中从下往上执行动画

image

五. 自定义动画

当上面的动画已经不满足需求的时候，jQuery提供了自定义动画的方法

.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一个CSS属性和值的对象,动画将根据这组对象移动。

$('.animate').on('click',function(){
  $('.box').animate({
    left: '+=100',//对于左右的移动是在已经定位的前提下
    width: '200px'
  },500);
});

这与css差不多，只不过css是一下子变化，而animate是渐变的变化