JQ的事件
on() 綁定事件
off() 移出事件
click()寫法，也用off()取消
JQ中的事件綁定可以使用相應的事件函數比如說：
click() mouseover() mousermove()..
也可以使用on()方法
$('div').on('click', function(){ alert(1);})
支持多事件寫法:
$('#div1').on('click mouseover',function(){ alert(123);});
通過on方法添加的事件, 可以通過off方法移除；
- $('div').off('click', fn); 移除指定事件的指定函數
$('div').off('click'); 移除指定事件的所有函數
$('div').off('click mouseover'); 移除多個事件的所有函數
$('div').off(); 移除所有事件
<div>aaaaaaa</div>
<script>
// $('div').click(function(){
// alert(1);
// })
// function fn(){
// console.log(1);
// }
// $('div').on( 'click', fn);
// $('div').on('click mouseover', function(){
// alert(1);
// })
// $('div').off( 'click', fn);
//移除該事件上的所有函數
// $('div').off();
// //移除指定事件的指定函數
// $('div').off('click', fn);
// //移除指定事件的所有函數
// $('div').off('click');
// //移除多個事件的所有函數
// $('div').off('click mouseover');
// //移除所有事件
// $('div').off();
$('div').click(function(){
alert(1);
})
$('div').off('click');
</script>
運動
無默認的時間 normal
show() , hide() , toggle()
'fast' 200 快
'normal' 400 正常
'slow' 600 慢
動畫效果：有默認的時間 normal
- 漸入顯示 ：fadeIn
漸出消失：fadeOut
交替： fadeToggle()
向下滑出顯示：slideDown() ,
向上滑入消失：slideUp() ,
交替滑入滑出： slideToggle()
<body>
<button>顯示隱藏</button>
<div></div>
<script>
var onOff = true;
$('button').on('click', function(){
if(onOff){
$('div').slideUp(1000);
}
else{
$('div').slideDown(1000);
}
onOff = !onOff;
});
</script>
</body>
animate() :自定義動畫
單詞：linear 勻速
swing：慢快慢；
參數:
第一個參數 : 對象 {} 去設置樣式屬性和值(目標點)
第二個參數 : 時間 默認是400
第三個參數 : 運動形式 只有兩種 swing(默認 : 緩沖 : 慢快慢) linear(勻速的)
第四個參數 : 運行結束的回調
<script>
$('button').on('click',function(){
// $('div').animate({opacity:0},1000,'linear');
$('div').animate({marginLeft:600},1000,'linear',run);
})
function run(){
$('div').animate({marginTop:600},500,'linear',run1);
}
function run1(){
$('div').animate({marginLeft:0},500,'linear',run2);
}
function run2(){
$('div').animate({marginTop:0},500,'linear');
}
</script>
第二種寫法
參數的第二種寫法
將后三個參數寫在一個對象 {} 中 , 作為函數的第二個參數，默認的設置可以省略
$('#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() 停止當前運動，繼續執行后面的運動
//默認情況下 : 只會停止當前運動
//比如說［運動１， 運動２］, 我們現在正在運動１， 點擊停止， 停止運動１到當前位置，然后運行運動2
$('#div1').stop();
//第一個參數 : 可以停止所有的運動 停止到當前位置
$('#div1').stop(true);
//第二個參數 : 使當前運動停止到指定的目標點，后面的運動不會在執行
$('#div1').stop(true,true);
//可以停止在所有的指定的目標點
$('#div1').finish();
stop()還可以清空隊列
鼠標移入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});
});
