JQ中的运动
- show() , hide() , toggle()
- fast normal slow
- fadeIn() , fadeOut() , fadeToggle()
- 有默认的时间 normal
- slideDown() , slideUp() , slideToggle()
- 有默认的时间 normal
show(), hide()
参数：
- 'fast': 200毫秒
- 'normal': 400毫秒
- 'slow: 600毫秒
- 也可以直接添加时间
效果: 改变透明度, 改变尺寸
<style>
#div1{ width:200px; height:200px; background:red;}
</style>
<input type="button" value="点击" id="input1">
<div id="div1"></div>
<script>
var onOff = true;
$('#input1').click(function(){
if(onOff){
$('#div1').hide('slow');
}
else{
$('#div1').show('fast');
// $('#div1').show(1000);
}
onOff =! onOff;
});
</script>
toggle()
show() hide() 的合体
$('#input1').click(function(){
$('#div1').toggle(600);
});
fadeIn() , fadeOut() , fadeToggle()
渐入渐出效果
有默认的时间 normal
slideDown() , slideUp() , slideToggle()
滑动动画
有默认的时间 normal
animate()
上面介绍的都是一些简单的动画,
我们可以用animate()自定义动画
参数:
- 第一个参数 : 对象 {} 去设置样式属性和值(目标点)
- 第二个参数 : 时间 默认是400
- 第三个参数 : 运动形式 只有两种 swing(默认 : 缓冲 : 慢快慢) linear(匀速的)
- 第四个参数 : 运行结束的回调
$('#div1').animate({width: 300});
$('#div1').animate({width: 300}, 2000);
$('#div1').animate({width: 300}, 2000, 'linear');
$('#div1').animate({width: 300}, 2000, 'linear', function(){ alert(1) });
数值的运算操作
$('#div1').animate({width: '+=100'});//在原来的基础上加上100
参数的第二种写法
将后三个参数写在一个对象 {} 中 , 作为函数的第二个参数
$('#div1').animate({
width: 300
}, {
duration: 2000,
easing: 'linear',
complete: function(){
alert(1)
}
})
队列的概念
思考一个问题: 下面三个动画是同时开始运动的吗？
$('#div1').animate({width : 300},1000);
$('#div1').animate({height : 300},1000);
$('#div1').animate({left : 300},1000);
答案：不是 是一个一个顺序执行的
animate()是一个异步函数
$('#div1').animate({width : 300},1000);
alert(1);
不会阻塞代码的运行
既然是异步, 为什么不是同时执行
因为animate函数的作用只是将运动加入到运动队列中
运动队列可以理解为一个数组 [ 运动1, 运动2, 运动3 ]
当运动1完成后, 才开始执行运动2
delay()
延迟
$('#div1').animate({width : 300},1000);
$('#div1').delay(1000);//上面运动执行完之后, 延时1000毫秒, 再执行后续运动
$('#div1').animate({height : 300},1000);
也相当与将延时加入运动队列
[运动1, 延时, 运动2]
链式写法
$('#div1').animate({width : 300},1000).delay(1000).animate({height : 300},1000);
停止运动
stop()
<style>
#div1{ width:200px; height:200px; background:red;}
</style>
<input type="button" value="点击" id="input1">
<input type="button" value="停止" id="input2">
<div id="div1"></div>
<script>
$('#input1').click(function(){
$('#div1').animate({width : 300},1000).animate({height : 300},1000);
})
$('#input2').click(function(){
//默认情况下 : 只会停止当前运动
//比如说［运动１， 运动２］, 我们现在正在运动１， 点击停止， 停止运动１到当前位置，然后运行运动2
$('#div1').stop();
//第一个参数 : 可以停止所有的运动 停止到当前位置
$('#div1').stop(true);
//第二个参数 : 可以停止到指定的目标点(当前的)
$('#div1').stop(true,true);
//可以停止到指定的目标点所有的
$('#div1').finish();
})
</script>
运动的队列问题
下面的这个例子当鼠标移入div变大 移出变小
$('#div1').mouseover(function(){
$(this).animate({width:200,height:200});
}).mouseout(function(){
$(this).animate({width:100,height:100});
});
当快速移入移出的时候， 就出现问题了
鼠标移出后， 运动依然没有停止
原因： 当快速的移入移出, 运动不断的被加入运动队列中, 运动被依次执行, 由于运动需要一定的时间, 所以出现了这种情况
我们可以用stop()方法来解决这个问题
stop() : 不但可以停止运动，还有清空队列的行为
$('#div1').mouseover(function(){
$(this).stop().animate({width:200,height:200});
}).mouseout(function(){
$(this).stop().animate({width:100,height:100});
});
