我的jQuery懸停淡入效果有什麼問題？

http://leongaban.com/_stack/fade/我的jQuery懸停淡入效果有什麼問題？

我剛剛進入jQuery和有噸教程在那裏就如何進出做這個簡單的淡入淡出，而是從AS3的背景好像我的代碼來下面應該工作，我m好奇爲什麼它沒有。

在側翻的黃色框淡出
但是上推出的黃色框消失還挺早在出後再重新

不知道爲什麼它「反彈」的鼠標移開功能...想法？

HTML

<div class="fade"> 
    <h2>The Title</h2> 

    <p>Lorem ipsum.</p> 
</div>

jQuery的

<script> 

    (function() { 

     var fade = $('div.fade'); 

     fade.mouseover(function() { 

       fade.fadeOut(500); 

     }); 

     fade.mouseout(function() { 

      fade.fadeIn(600); 
     }); 

    })(); 

</script>

來源

2012-12-06 Leon Gaban

嘗試使用mouseenter替換mouseover，使用mouseleave替換mouseoff – series0ne

對mouseenter和mouseleave使用+1，同樣，fadeOut fadeIn事件堆疊起來，所以如果有人持續鞭打鼠標，動畫會執行很多次倍。我會使用.animate（{'opacity'：0}），並在那裏拋出.stop（）調用以防止多個動畫 – VIDesignz

這是因爲你在mouseover上淡出。一旦淡出完成，元素被隱藏。因此，第二個你移動鼠標，mouseout事件被註冊，並且它消失回來。

嘗試使用.animate({opacity: 0}, 600);，並.animate({opacity: 1}, 600);等

來源

2012-12-06 16:54:07

Ah sweet thanks！這工作！ –

我會考慮添加'.stop（）。animate（{opacity：0}，600）;'和'.stop（）。animate（{opacity：1}，600）;'以防止多個動畫 – VIDesignz

好點。理想情況下，我只是使用CSS。實際上在這裏根本就不需要javascript了 –

您應該考慮使用mouseenter/mouseleave代替。

看一看 - http://www.quirksmode.org/js/events_mouse.html

另外，hoverintent plugin可能是值得一試。

來源

2012-12-06 16:54:05 boz

你應該使用mouseenter和mouseleave功能。每當鼠標進入或離開某個元素時，都會觸發mouseover。

檢查demo看到mouseover在行動，並查看它爲什麼不是正確的事件。

來源

2012-12-06 16:56:10 jbabey

這個效果更好，但是如果我開始在黃框內移動鼠標，動畫將會開始和結束 –

我的jQuery懸停淡入效果有什麼問題？

回答

相關問題