jQuery动画

jQuery动画

显示隐藏动画

• 显示动画show( )
• 隐藏动画hide( )
• 切换动画toggle( )

show/hide/toggle(时间,结束时的回调函数)

展开收起动画

• 展开slideDown( )
• 收起slideUp( )
• 切换slideToggle( )

slideDown/slideUp/slideToggle(时间,结束时的回调函数)

淡入淡出动画

• 淡入fadeIn( )
• 淡出fadeOut( )
• 切换fadeToggle( )
• 淡入到fadeTo( )

fadeIn/fadeOut/fadeToggle(时间，结束时的回调函数)
fadeTo(时间,淡入到的透明度,结束时的回调函数 )

自定义动画

animate(对象，时间，动画执行方式，回调函数)

• 对象：{属性：值,属性：值}
• 时间：加入动画队列的时间
• 动画执行方式：默认swing（匀速），linear(先慢后快再慢)
• 回调函数：动画执行结束之后执行

animate操作属性

class为box1的div会匀速向右运动

$(".box1").animate({marginLeft:500},2000,“linear”);

class为box2的div会缓速向右运动

$(".box2").animate({marginLeft:500},2000,“swing”);

animate累加属性

每次点击按钮，class为box1的div宽度会加100px

$(“button”).click(function()
{
$(".box1").animate({width:"+=100"},500);
})

animate使用关键字
关键字：hide隐藏,toggle切换显示隐藏等等

每次点击按钮class为box1的div都会切换显示隐藏

$(“button”).click(function()
{
$(".box1").animate({width:“toggle”},500);
})

stop( )和delay( )

• 停止动画stop( )
• 延时delay( )

delay(时间)
stop(清空队列，完成队列)
stop(第一个参数，第二个参数)
第一个参数：true：清空 false：不清空
第二个参数： true：完成 false：不完成

$(“div”).stop(true); //当前停止，后续也停止
$(“div”).stop(false); //当前停止,后续不停止
$(“div”).stop(true,false); //当前停止，后续也停止
$(“div”).stop(true,true); //当前停止并立即执行完毕，后续停止
$(“div”).stop(false,true); //当前停止并立即执行完毕，后续不停止
$(“div”).stop(false,false); //当前停止,后续不停止