用户登录
用户注册

分享至

jQuery 动画

  • 作者: 天高云淡33103181
  • 来源: 51数据库
  • 2021-09-03

动画效果
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;

软件
前端设计
程序设计
Java相关