JQ中的運(yùn)動(dòng)
- show() , hide() , toggle()
- fast normal slow
- fadeIn() , fadeOut() , fadeToggle()
- 有默認(rèn)的時(shí)間 normal
- slideDown() , slideUp() , slideToggle()
- 有默認(rèn)的時(shí)間 normal
show(), hide()
參數(shù)：
- 'fast': 200毫秒
- 'normal': 400毫秒
- 'slow: 600毫秒
- 也可以直接添加時(shí)間
效果: 改變透明度, 改變尺寸
<style>
#div1{ width:200px; height:200px; background:red;}
</style>
<input type="button" value="點(diǎn)擊" 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()
漸入漸出效果
有默認(rèn)的時(shí)間 normal
slideDown() , slideUp() , slideToggle()
滑動(dòng)動(dòng)畫
有默認(rèn)的時(shí)間 normal
animate()
上面介紹的都是一些簡單的動(dòng)畫,
我們可以用animate()自定義動(dòng)畫
參數(shù):
- 第一個(gè)參數(shù) : 對(duì)象 {} 去設(shè)置樣式屬性和值(目標(biāo)點(diǎn))
- 第二個(gè)參數(shù) : 時(shí)間 默認(rèn)是400
- 第三個(gè)參數(shù) : 運(yùn)動(dòng)形式 只有兩種 swing(默認(rèn) : 緩沖 : 慢快慢) linear(勻速的)
- 第四個(gè)參數(shù) : 運(yùn)行結(jié)束的回調(diào)
$('#div1').animate({width: 300});
$('#div1').animate({width: 300}, 2000);
$('#div1').animate({width: 300}, 2000, 'linear');
$('#div1').animate({width: 300}, 2000, 'linear', function(){ alert(1) });
數(shù)值的運(yùn)算操作
$('#div1').animate({width: '+=100'});//在原來的基礎(chǔ)上加上100
參數(shù)的第二種寫法
將后三個(gè)參數(shù)寫在一個(gè)對(duì)象 {} 中 , 作為函數(shù)的第二個(gè)參數(shù)
$('#div1').animate({
width: 300
}, {
duration: 2000,
easing: 'linear',
complete: function(){
alert(1)
}
})
隊(duì)列的概念
思考一個(gè)問題: 下面三個(gè)動(dòng)畫是同時(shí)開始運(yùn)動(dòng)的嗎伤疙？
$('#div1').animate({width : 300},1000);
$('#div1').animate({height : 300},1000);
$('#div1').animate({left : 300},1000);
答案：不是 是一個(gè)一個(gè)順序執(zhí)行的
animate()是一個(gè)異步函數(shù)
$('#div1').animate({width : 300},1000);
alert(1);
不會(huì)阻塞代碼的運(yùn)行
既然是異步, 為什么不是同時(shí)執(zhí)行
因?yàn)閍nimate函數(shù)的作用只是將運(yùn)動(dòng)加入到運(yùn)動(dòng)隊(duì)列中
運(yùn)動(dòng)隊(duì)列可以理解為一個(gè)數(shù)組 [ 運(yùn)動(dòng)1, 運(yùn)動(dòng)2, 運(yùn)動(dòng)3 ]
當(dāng)運(yùn)動(dòng)1完成后, 才開始執(zhí)行運(yùn)動(dòng)2
delay()
延遲
$('#div1').animate({width : 300},1000);
$('#div1').delay(1000);//上面運(yùn)動(dòng)執(zhí)行完之后, 延時(shí)1000毫秒, 再執(zhí)行后續(xù)運(yùn)動(dòng)
$('#div1').animate({height : 300},1000);
也相當(dāng)與將延時(shí)加入運(yùn)動(dòng)隊(duì)列
[運(yùn)動(dòng)1, 延時(shí), 運(yùn)動(dòng)2]
鏈?zhǔn)綄懛?/p>
$('#div1').animate({width : 300},1000).delay(1000).animate({height : 300},1000);
停止運(yùn)動(dòng)
stop()
<style>
#div1{ width:200px; height:200px; background:red;}
</style>
<input type="button" value="點(diǎn)擊" 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(){
//默認(rèn)情況下 : 只會(huì)停止當(dāng)前運(yùn)動(dòng)
//比如說［運(yùn)動(dòng)１银酗， 運(yùn)動(dòng)２］, 我們現(xiàn)在正在運(yùn)動(dòng)１辆影， 點(diǎn)擊停止， 停止運(yùn)動(dòng)１到當(dāng)前位置黍特，然后運(yùn)行運(yùn)動(dòng)2
$('#div1').stop();
//第一個(gè)參數(shù) : 可以停止所有的運(yùn)動(dòng) 停止到當(dāng)前位置
$('#div1').stop(true);
//第二個(gè)參數(shù) : 可以停止到指定的目標(biāo)點(diǎn)(當(dāng)前的)
$('#div1').stop(true,true);
//可以停止到指定的目標(biāo)點(diǎn)所有的
$('#div1').finish();
})
</script>
運(yùn)動(dòng)的隊(duì)列問題
下面的這個(gè)例子當(dāng)鼠標(biāo)移入div變大 移出變小
$('#div1').mouseover(function(){
$(this).animate({width:200,height:200});
}).mouseout(function(){
$(this).animate({width:100,height:100});
});
當(dāng)快速移入移出的時(shí)候蛙讥， 就出現(xiàn)問題了
鼠標(biāo)移出后， 運(yùn)動(dòng)依然沒有停止
原因： 當(dāng)快速的移入移出, 運(yùn)動(dòng)不斷的被加入運(yùn)動(dòng)隊(duì)列中, 運(yùn)動(dòng)被依次執(zhí)行, 由于運(yùn)動(dòng)需要一定的時(shí)間, 所以出現(xiàn)了這種情況
我們可以用stop()方法來解決這個(gè)問題
stop() : 不但可以停止運(yùn)動(dòng)灭衷，還有清空隊(duì)列的行為
$('#div1').mouseover(function(){
$(this).stop().animate({width:200,height:200});
}).mouseout(function(){
$(this).stop().animate({width:100,height:100});
});
- 例子 : 淘寶輪播圖
