javascript - JQuery FadeOut 发生在错误的时间

Question

我有以下代码：

$(document).ready(function () {

$("#full-btns").children().delay(4000).fadeOut("slow");

$('#full-btns').hover(function() {
      $('#full-btns').children().stop().animate({opacity:'100'});
      $('#full-btns').children().show();

}, function() {
        $("#full-btns").children().fadeOut("slow");

});

页面加载后，#full-btns元素会在淡出之前显示 4000 毫秒。我遇到的问题是，如果用户在元素仍然可见时将其悬停在#full-btns元素上，则会导致它淡出，因为$("#full-btns").children().fadeOut("slow");在悬停时会调用它。我希望#full-btns将鼠标悬停在它上面时始终可见。

当页面加载时，将鼠标悬停在红色 div 上，注意它是如何淡出的。这是不可取的。当悬停在红色 div 上时（当它可见时）它应该保持可见

更新： http: //jsfiddle.net/gazedge/nhBBc/（现在包括解决方案）

Answer 1

如果我没有误解这个问题 - 你不能return false;在悬停呼叫结束时防止事件冒泡吗？

http://www.quirksmode.org/js/events_order.html
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 2

使用 setInterval 和 clearInterval；

$('#full-btns').hover(function() {

      clearInterval(refreshIntervalId);        
      $('#full-btns').children().stop().animate({opacity:'100'});
      $('#full-btns').children().show();

}, function() { 
        $("#full-btns").children().fadeOut("slow");            
});

var refreshIntervalId = setInterval(function() {
     $("#full-btns").children().fadeOut("slow");
}, 4000);

​</p>

Answer 3

您唯一需要做的就是在任何人悬停之前清除所有动画。

$("#full-btns").children().delay(4000).fadeOut("slow");

    $('#full-btns').hover(function() {
        $('#full-btns').children().stop(true, true);  // Stop the fade-out animation
          $('#full-btns').children().stop().animate({opacity:'100'});
          $('#full-btns').children().show();

    }, function() {
        console.log('fadeOout called');
            $("#full-btns").children().fadeOut("slow"); 


    });​

http://jsfiddle.net/nhBBc/5/

注意： 第一次悬停时（在代码中）div 淡出不是因为 $("#full-btns").children().fadeOut("slow"); 但是因为它只是完成了您应用的早期动画。[你的第一行]。