1.显示隐藏
show() |
hide() |
toggle() |
默认0秒完成动画 |
默认0秒完成动画 |
默认0秒完成动画 |
2.淡入淡出
fadeIn() |
fadeOut() |
fadeToggle() |
淡出 |
淡入 |
|
默认400秒完成动画 |
默认400秒完成动画 |
默认0秒完成动画 |
3.向上展开,向下收缩
slideUp() |
slideDown() |
slideToggle() |
向上展开 |
向下收缩 |
|
默认400秒完成动画 |
默认400秒完成动画 |
默认0秒完成动画 |
4.自定义动画animate();
1)参数的运作
第一个参数:对象{} 去设置样式属性和值(目标点)
$('.div').animate({ width:100,height:100 });//加不加px都无所谓,jQ已做处理
第二个参数:时间,默认是400
$('.div').animate({ width:100,height:100 },300);
第三个参数:运动形式,只有两种,swing(默认,缓冲:慢快慢),linear(匀速)
$('.div').animate({ width:100,height:100 },300,'linear');
第四个参数:运动结束的回调
$('.div').animate({ width:100,height:100 },300,'linear',function(){
alert(1);
});
2)数值的运算操作
点击按钮每次宽度+100px
$('.btn').click(function(){
$('.div').animate({ width: '+=100' },1000);//可以接受数值的操作,每次加100
});
3)配置参数step的使用
$('.btn').click(function(){
$('.div1').animate({
width:300
},{
duration: 1000, // 时间
easing: 'linear', // 运行方式
complete: function(){ // 回调函数
alert(1);
},
step: function(a,b){
console.log(a); // 可以监测我们定时器的每一次变化
console.log(b); // 运动的一种算法
console.log(b.pos); // 运动过程中的比例值(0~1)
}
});
});
/* 假如想让div里面的数字,从0到276453,可以用.pos来实现 */
$('.btn').click(function(){
$('.div1').animate({
num:'move' // 不会起作用,但必须要有占位符,否则不会执行
},{
duration: 2000, // 时间
easing: 'linear',
step: function(a,b){
$('.div1').html( parseInt(b.pos*276453) )
}
});
});
4)延迟操作delay();
让一个div的宽从100到200,延时1秒钟后高也从100到200
$('div').animate({width:200},1000).delay(1000).animate({height:200},1000);
4)停止运动stop();
$('.demo').stop(); // 默认情况下,只会停止当前运动(如果点击该按钮,如果停止宽度变化,进行高的变化,如果宽的变化玩,停止高,高会立即停止效果)
$('.demo').stop(true); //第一个参数:可以停止所有的运动(立即停止宽,高度的动画不会执行)
$('.demo').stop(true,true); //第二个参数:可以停止到当前指定的目标点(也不会响应高的动画)
$('.dmeo').finish(); // 立即完成所有动画(宽高都会立即执行)
stop()也有清空队列的行为
<input class="begin_btn" type="button" value="开始运动">
<input class="stop_btn" type="button" value="结束运动">
<div class="demo"></div>
// 默认情况下,只会停止当前运动
$('.begin_btn').click(function(){
$('.demo').animate({width:200},1000).animate({height:200},1000);
});
$('.stop_btn').click(function(){
$('.demo').stop(); // 默认情况下,只会停止当前运动(如果点击该按钮,如果停止宽度变化,进行高的变化,如果宽的变化玩,停止高,高会立即停止效果)
$('.demo').stop(true); //第一个参数:可以停止所有的运动(立即停止宽,高度的动画不会执行)
$('.demo').stop(true,true); //第二个参数:可以停止到当前指定的目标点(也不会响应高的动画)
$('.dmeo').finish(); // 立即完成所有动画(宽高都会立即执行)
});