12.15JQ的事件和運動

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() 停止當前運動,繼續執行后面的運動

//默認情況下 : 只會停止當前運動 
    //比如說[運動1, 運動2], 我們現在正在運動1, 點擊停止, 停止運動1到當前位置,然后運行運動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});
    
});
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • jQuery基礎 什么是JQ?一個優秀的JS庫,大型開發必備JQ的好處?一簡化JS的復雜操作二不再需要關心兼容性三...
    幺七閱讀 954評論 0 2
  • 通過jQuery,您可以選取(查詢,query)HTML元素,并對它們執行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 670評論 0 3
  • 一.jQury的引入 jQuery的優勢 輕量級 強大的選擇器 出色的DOM操作 可靠的事件處理機制 完善的Aja...
    空谷悠閱讀 541評論 0 2
  • 選擇器選擇器是jQuery的核心。 事件 動畫 擴展
    wyude閱讀 485評論 0 1
  • 題記:聽歌聽心情,看電影感受劇情,看小說注重想象力。進入虛構世界中的自己,借以娛樂,是好是壞,無法定論。 一、聽歌...
    一護vs鵬閱讀 348評論 4 5