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。我想让{{1}}在悬停在它上面时始终可见。

当页面加载时，将鼠标悬停在红色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);

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 （“慢”）; ，但因为它只是完成了你应用的早期动画。 [你的第一行]。

JQuery FadeOut在错误的时间发生

3 个答案: