javascript/jquery : How to prevent from continuing to fade in and fade out

Question

在我的示例代码/jsfiddle中:如果您在单词测试上快速来回移动鼠标到鼠标离开div的位置(#footer_logo_container)，悬停div，离开div，等等......它就像脚本计算鼠标移过它的次数一样，div(#powered_by) 会一遍又一遍地淡入/淡出/淡入/淡出，具体取决于鼠标移过 div 的次数。

问题:有没有办法让鼠标移到#footer_logo_container 上时，出现#powered_by div。我还想知道是否有办法让它保持淡入最短的时间(x秒)一旦鼠标移开#footer_logo_container，如果鼠标继续进出文本，它会忽略它，直到 #powered_by 完全淡出。

JSFIDDLE:http://jsfiddle.net/5jEmc/1/

脚本:

$(document).ready(function() {
$("#footer_logo_container").hover( 
        function() { $(this).find("#powered_by").fadeIn(); },
        function() { $(this).find("#powered_by").fadeOut(); }
        );         
});

HTML:

<div id="footer_logo_container">
    Testing<br /><br /><br />
    <div id="powered_by">FadeIn</div>
</div>

CSS:#powered_by { 显示:无； }

Answer 1

您必须使用stop() See more

<强> Working Demo

Jquery

$(document).ready(function() {
$("#footer_logo_container").hover( 
        function() { $(this).find("#powered_by").stop().fadeIn(); },
        function() { $(this).find("#powered_by").stop().fadeOut(); }
        );         
});

如果您希望在执行fadeOut之前延迟，请使用此行。

function() { $(this).find("#powered_by").stop()delay(1000).fadeOut(); }