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

區別：

mouseover與mouseenter

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

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

mouseout與mouseleave

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

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

 

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

但是#a有子元素的情況下，為了mouseover，mouseout觸發的此時就可能比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);//清除元素的所有動畫，讓當前動畫直接到達末狀態