javascript/jquery:如何防止继续淡入淡出

Question

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

问：有没有办法使鼠标越过 #footer_logo_container 时，出现 #powered_bydiv。 我还想知道是否有办法让它在鼠标移出 #footer_logo_container 后保持淡入最短的时间（x 秒），如果鼠标继续进出文本，它会忽略它，直到 #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 { display: none; }

Answer 1

你必须使用 stop() 查看更多

工作演示

Jquery

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

如果要在执行fadeOut之前delay，请使用此行。

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

Answer 2

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