JQuery FadeOut在错误的时间发生

我有以下代码:

$(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 元素在淡出前显示4000ms . 我遇到的问题是,如果用户在 #full-btns 元素仍然可见的情况下悬停在它上面,它会导致淡出,因为在悬停时调用了 $("#full-btns").children().fadeOut("slow"); . 我希望 #full-btns 在悬停在它上面时始终可见 .

当页面加载时,将鼠标悬停在红色div上,注意它是如何淡出的 . 这是不可取的 . 当鼠标悬停在红色div上时(虽然可见),它应该保持可见

更新:http://jsfiddle.net/gazedge/nhBBc/(现在包括解决方案)

回答(3)

2 years ago

使用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);

2 years ago

如果我在你的悬停呼叫结束时只是 return false; ,以防止事件冒泡?

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

2 years ago

你唯一需要做的就是在任何人盘旋之前清除所有动画 .

$("#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/

Note: 第一次当你悬停并且(在你的代码中)div淡出时,它不是因为 $("#full-btns").children().fadeOut("slow"); 而是因为它只是完成了你应用的早期动画 . [你的第一行] .