JQuery 动画

函数	语法	描述
显示元素	$(ele).show(timer, easing)	timer 动画执行的毫秒数 easing 动画执行时间曲线
隐藏元素	$(ele).hide(timer, easing)	timer 动画执行的毫秒数 easing 动画执行时间曲线
切换元素隐藏	$(ele).toggle(timer, easing)	timer 动画执行的毫秒数 easing 动画执行时间曲线
淡入元素	$(ele).fadeIn(timer, easing)	timer 动画执行的毫秒数 easing 动画执行时间曲线
淡出元素	$(ele).fadeOut(timer, easing)	timer 动画执行的毫秒数 easing 动画执行时间曲线
切换元素淡入淡出	$(ele).fadeToggle(timer, easing)	timer 动画执行的毫秒数 easing 动画执行时间曲线
淡入淡出效果到某一处为止	$(ele).fadeTo(timer, opacity, easing, callback)	timer 动画执行的毫秒数 opacity 透明度 easing 动画执行时间曲线 callback 动画执行到目标透明度时的回调函数
展开元素	$(ele).slideDown(timer, easing)	timer 动画执行的毫秒数 easing 动画执行时间曲线
合上元素	$(ele).slideUp(timer, easing)	timer 动画执行的毫秒数 easing 动画执行时间曲线
切换元素展开合上	$(ele).fadeToggle(timer, easing)	timer 动画执行的毫秒数 easing 动画执行时间曲线

看看下面的动画效果，是不是很简单，但是JQuery作为一款强大的库，不仅可以自己使用这些动画效果，我们可以以自己去写动画效果。

animate 动画

$(ele).animate({}, timer, callback)

animate 可以自定义元素样式变化，实现动画过渡效果。

$('.content').animate({
    width: '300',
    height: '300'
}, 1000, function() {
    console.log('动画执行完毕')
})

使用 stop 函数可以暂停动画；

• 不传递参数，停止当前动画，执行下一个动画
  • $(ele).stop();
• 传递一个参数 true，停止所有的动画
  • $(ele).stop(true);
• 传递两个参数 true，直接到动画结束时候的状态
  • $(ele).stop(true, true);

除了 stop 停止所有的动画，还可以使用 finish 函数直接完成到最后一次的动画。

$(ele).finish();

使用 delay 函数可以延迟动画

$('#start').click( function()  {    
    $('.content').animate({
        width: '300',
        height: '300'    
    })
    .delay(2000) // 此处延时两秒
    .animate({
        width: '50',
        height: '50' 
    })
})