jQuery 动画 笔记

jQuery 动画要求在标准模式下
html5 标准模式

<!DOCTYPE html>

show() hide()

修改 display:none

.show( [duration ] [, complete ] )

duration (default: 400)
Type: Number or String
A string or number determining how long the animation will run.
complete
Type: Function()
A function to call once the animation is complete, called once per matched element.

fadeIn() fadeOut()

淡入淡出(修改不透明度)

slideUp() slideDown()

滑动(修改高度)

自定义动画 animate()

.animate( properties [, duration ] [, easing ] [, complete ] )
  • properties Type: PlainObject 目标属性
  • duration (default: 400) Type: Number or String 时长
  • easing (default: swing) Type: String 过渡方式
  • complete Type: Function() 回调

累加累减动画

$("div").animate({left:'+=500px'},300);

连续动画

$(this).animate({left:"500px"},3000)
       .animate({height:"200px"},3000)

停止动画

.stop( [clearQueue ] [, jumpToEnd ] )
  • clearQueue Type: Boolean 是否清空未完成的队列
  • jumpToEnd Type: Boolean 是否直接将正在执行的动画跳转到末状态

stop()会停止当前动画,从当前状态执行后面动画
光标动画

$("panel").hover(
    function(){
        $(this).stop(true)
               .animate();
    },
    function(){
        $(this).stop(true)
               .animate();
    }   
)

判断是否处于动画状态

if(!$(element).is(":animated")){}

延迟动画

delay()

其他动画方法

  • toggle 切换可见
  • slideToggle
  • fadeTo
  • fadeToggle

动画方法概括