首页 文章

JQuery FadeOut在错误的时间发生

提问于
浏览 次
0

我有以下代码：

$(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/（现在包括解决方案）

javascript jquery css fadeout

3 回答

  • 0

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

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

    回复于
  • 0

    使用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);
    回复于
  • 0

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

    $("#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"); 而是因为它只是完成了你应用的早期动画 . [你的第一行] .

    回复于

相关问题