欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery 动画

程序员文章站 2022-07-02 14:34:22
动画效果slideDown(100)下到上显示slideToggle(100)上到下显示slideUp(100)上到下隐藏fadeIn(100)淡淡显示fadeOut(100)淡淡显示fadeToggle()自动切换hide(100)右下角隐藏show(100)左上角显示animate({},100 ......

动画效果
slideDown(100)下到上显示
slideToggle(100)上到下显示
slideUp(100)上到下隐藏
fadeIn(100)淡淡显示
fadeOut(100)淡淡显示
fadeToggle()自动切换
hide(100)右下角隐藏
show(100)左上角显示
animate({},100)自定义动画
fast 200毫秒
slow 600毫秒
默认400毫秒
toggle判断

stop()取消动画效果

列队动画方法

使用回调函数,强行将.css()方法排队到.slideDown()之后
$('#box').slideUp('slow').slideDown('slow',function(){
$(this).css('background','orange');
});

使用.queue()方法模拟动画方法跟随动画方法之后
$('#box').slideUp('slow').slideDown('slow').queue(function(){
$(this).css('background','orange');
});

使用 next 参数来实现继续调用列队动画
$('#box').slideUp('slow').slideDown('slow').queue(function(next){
$(this).css('background','orange');
next();
}).hide('slow');

使用顺序调用的列队,逐个执行,非常清晰
$('#box').slideUp('slow');
$('#box').slideDown('slow');
$('#box').queue(function(){
$(this).css('background','orange');
$(this).dequeue();
})
$('#box').hide('slow');

获取当前列队的长度,fx 是默认列队的参数
functioncount(){
return$("#box").queue('fx').length;
}

在某个动画处调用
$('#box').slideDown('slow',function(){alert(count());});

清理动画列队
$('#box').slideDown('slow',function(){$(this).clearQueue()});

动画相关方法

强制停止运行中的
stop(true,true);
第一个参数表示是否取消列队动画,默认为 false。如果参数为 true,当有列队动 画的时候,会取消后面的列队动画。
第二参数表示是否到达当前动画结尾,默认为 false。 如果参数为 true,则停止后立即到达末尾处。

动画全局属性
设置运行帧数为1000毫秒 默认为 13
$.fx.interval=1000;

设置动画为关闭 true 默认为 false
$.fx.off=true;