jQuery 动画效果 与 动画队列

基础效果 .hide([duration ] [,easing ] [,complete ])

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

$('.target').hide() //等同于 $('.target').css('display', 'none')

 

.show()

用于显示元素，用法和hide类似

$('#btn-box1').on('click',function(){ $('.box').show('normal') })

 

.toggle()

用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

渐变效果 .fadeIn()

以淡入的方式显示匹配元素

$('#btn-box3').on('click',function(){ $('.box').fadeIn() })

 

.fadeOut()

以淡出的方式显示匹配元素

$('#btn-box4').on('click',function(){ $('.box').fadeOut() })

 

.fadeTo()

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

$('#book').fadeTo('slow', 0.5, function() { // Animation complete. });

 

滑动效果 .slideDown() / .slideUp()

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

$('#btn-box5').on('click',function(){ $('.box').slideDown() }) $('#btn-box6').on('click',function(){ $('.box').slideUp() })

 

回调同步 与 异步

如以下案例

回调同步

即在整个动画结束之后，出现'hide'，即为同步

$('#btn-box1').on('click',function(){ $('.box').hide('normal', funciton(){ console.log('hide') }) }) 异步

即只要事件触发瞬间（即按下btn），就出现'hide'，即为异步

$('#btn-box1').on('click',function(){ $('.box').hide('normal') console.log('hide') })

具体参考 demo 案例 1 中的案例

$('#action1').on('click',function(){ var $box = $('.box') //回调地狱写法 $box.hide(1000, function(){ $box.show(1000, function(){ $box.fadeOut('slow', function(){ $box.fadeIn('slow', function(){ $box.slideUp(function(){ $box.slideDown(function(){ console.log('动画执行完毕') $('#wrap1').text('动画执行完毕') }) }) }) }) }) }) }) $('#action2').on('click',function(){ var $box = $('.box') //使用jQuery动画队列写法 $box.hide(1000) .show(1000) .fadeOut('slow') .fadeIn('slow') .slideUp() .slideDown(function(){ console.log('真的执行完毕了') $('#wrap2').text('真的执行完毕了') //最后执行同步回调 }) console.log('动画完毕了吗？') //动画才刚开始，在动画队列创建的时候，就输出这句话，异步 $('#wrap2').text('动画完毕了吗？') })