jQuery——动画

jQuery动画

显示和隐藏动画展开和收起动画淡入和淡出动画自定义动画延迟动画停止动画

显示和隐藏动画

显示动画 show()

//第一个参数：动画时长 //第二个参数：动画执行完毕之后的回调函数 $('div').show(1000,function(){})

隐藏动画 hide()

//第一个参数：动画时长 //第二个参数：动画执行完毕之后的回调函数 $('div').hide(1000,function(){})

切换显示和隐藏动画 toggle()

//第一个参数：动画时长 //第二个参数：动画执行完毕之后的回调函数 $('div').toggle(1000,function(){})

展开和收起动画

展开动画 slideDown()

//第一个参数：动画时长 //第二个参数：动画执行完毕之后的回调函数 $('div').slideDown(1000,function(){})

收起动画 slideUp()

//第一个参数：动画时长 //第二个参数：动画执行完毕之后的回调函数 $('div').slideUp(1000,function(){})

切换展开和收起动画 slideToggle()

//第一个参数：动画时长 //第二个参数：动画执行完毕之后的回调函数 $('div').slideToggle(1000,function(){})

淡入和淡出动画

淡入动画 fadeIn()

//第一个参数：动画时长 //第二个参数：动画执行完毕之后的回调函数 $('div').fadeIn(1000,function(){})

淡出动画 fadeOut()

//第一个参数：动画时长 //第二个参数：动画执行完毕之后的回调函数 $('div').fadeOut(1000,function(){})

切换淡入淡出动画 fadeToggle()

//第一个参数：动画时长 //第二个参数：动画执行完毕之后的回调函数 $('div').fadeToggle(1000,function(){})

淡入到动画 fadeTo()

//第一个参数：动画时长 //第二个参数：淡入的一个程度 //第三个参数：动画执行完毕之后的回调函数 $('div').fadeTo(1000,0.5,function(){})

自定义动画

animate()

//第一个参数：一个对象：里面写要执行动画的属性 //第二个参数：动画时长 //第三个参数：指定动画节奏：默认swing（缓动、先慢后快再慢）。另外还有参数linear（匀速） //第四个参数：动画执行完毕之后的回调函数 $('div').animate({ width:500 },1000,'linear',function(){})

延迟动画

delay()

$('div').animate({ width:500 },1000).delay(2000).animate({ height:500 },1000)

停止动画

stop()

//1、立即停止当前动画，继续执行后续动画 $('div').stop() //2、立即停止当前和后续的所有动画 $('div').stop(true) //3、立即完成当前动画，继续执行后续动画 $('div').stop(false,true) //4、立即完成当前动画，并且停止后续所有的动画 $('div').stop(true，true)