1. 程式人生 > >jq:mouseover和mouseout多次觸發解決辦法

jq:mouseover和mouseout多次觸發解決辦法

mouseover ren div clas 結構 tro 需要 als ldr

區別:

mouseover與mouseenter

  不論鼠標指針穿過被選元素或其子元素,都會觸發 mouseover 事件。

  只有在鼠標指針穿過被選元素時,才會觸發 mouseenter 事件。

mouseout與mouseleave

  不論鼠標指針離開被選元素還是任何子元素,都會觸發 mouseout 事件。

  只有在鼠標指針離開被選元素時,才會觸發 mouseleave 事件。

在#a沒有子元素的情況下,兩者在效果上沒有區別

但是#a有子元素的情況下,為了mouseovermouseout觸發的此時就可能比mouseenter,mouseleave多

$("#a").mouseover(function(){ $(this).children().slideDown(1000); }).mouseout(function(){ $(this).children().slideUpt(1000); });

$("#a").mouseenter(function(){ $(this).children().slideDown(1000); }).mouseleave(function(){ $(this).children().slideUp(1000); });

而slideUp是個過程需要時間,但是mouseout,mouseover,mouseenter,mouseleave事件都是瞬間發生,多次觸發會產生動畫重復,這個可以用jq的stop方法阻止動畫。

$("#a").mouseenter(function(){ $(this).children().stop().slideDown(1000); }).mouseleave(function(){ $(this).children().stop().slideUp(1000); });

jquery stop:

//語法結構

$("#div").stop();//停止當前動畫,繼續下一個動畫
$("#div").stop(true);//清除元素的所有動畫
$("#div").stop(false, true);//讓當前動畫直接到達末狀態 ,繼續下一個動畫
$("#div").stop(true, true);//清除元素的所有動畫,讓當前動畫直接到達末狀態

jq:mouseover和mouseout多次觸發解決辦法