Jquery 停止淡入/淡出

Question

这是一个相当简单的问题，但我似乎无法弄清楚。

基本上我有一个jquery悬停，它在悬停时淡入一个div并淡出另一个。

当我快速悬停几次时，它会来回脉冲大约 3-4 秒以完成所有淡入/淡出。

我通常用 .stop() 来停止这些事情，但它在这里似乎不起作用。如果我将鼠标悬停在 an`$(".txtWrap").stop().hover( 之前的按钮上，如何消除淡入效果

$(".txtWrap").stop().hover(
  function () {
    $(this).find('.txtBock').fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').fadeOut();
  }
)

Answer 1

你的 stop() 放错地方了。

试试这个：

$(".txtWrap").hover(
  function () {
    $(this).find('.txtBock').stop().fadeOut();
    $(this).find('.txtDesc').fadeIn();
  //  $('#timeTxt').fadeOut();
  //  $('#timeTxtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').stop().fadeOut();
  }
)

---

编辑：

这将动画元素的不透明度而不隐藏元素。如果您希望它们隐藏，请使用 .hide() 您需要向 animate 函数添加回调。

$(".txtWrap").hover(
  function () {
    $(this).find('.txtBock').stop().animate({opacity:0}, 500);
    $(this).find('.txtDesc').animate({opacity:1}, 500);
  //  $('#timeTxt').fadeOut();
  //  $('#timeTxtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').animate({opacity:1}, 500);
    $(this).find('.txtDesc').stop().animate({opacity:0}, 500);
  }
)

Answer 2

我想我会发布这个，因为这些答案都不适合我。

*真正的参数告诉 stop 清除队列并转到动画末尾

$(".txtWrap").stop().hover(
  function () {
    $(this).find('.txtBock').stop(true, true).fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').stop(true, true).fadeOut();
  }
)

链接：http://forum.jquery.com/topic/jquery-hover-events-cant-keep-up-with-fadein-and-fadeout-events-queue

Answer 3

在这种时候，我求助于 Brian Cherne 的天才 .hoverIntent()插件 -- 非常流畅...等到用户放慢足够的速度后再执行。您可以根据您的需要进行配置。

只需包含插件（它足够短，有时我会将其直接放入我的脚本文件中），然后添加单词 Intent：

$(".txtWrap").hoverIntent(
  function () {
    $(this).find('.txtBock').fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').fadeOut();
  }
)

Answer 4

当超级智能的 SO 搜索引擎为我突出显示这个问题时，我正要发布类似的问题，所以我想我应该为后代发布我自己的解决方案。

我采用了 user113716 的解决方案并对其进行了充实。就我而言，我隐藏和显示的 div 最初是 display:none，因此我必须向 CSS 添加 opacity:0 并告诉 jQuery 设置 < code>.css({display:block}) 在它开始将不透明度动画设置为 1 淡入之前。

在淡出时，我不需要它，但我确实添加了将不透明度动画为零后对 div 的 .hide() 的回调。

这是一个小提琴，说明了我最终得到的结果：

http://jsfiddle.net/mblase75/wx2MJ/

相关的JavaScript：

$('li').mouseover(function() {
    $(this).addClass('hover');
    $('#' + $(this).data('divid')).stop().css({
        display: 'block'
    }).animate({
        opacity: 1
    }, 500);
});

$('li').mouseout(function() {
    $(this).removeClass('hover');
    $('#' + $(this).data('divid')).stop().animate({
        opacity: 0
    }, 500, function() {
        $(this).hide();
    });
});

Answer 5

如果你有这个东西：

$("#frase1").fadeIn(5000, function(){
   $("#frase2").fadeIn(10000, function(){
      $("#frase3").fadeIn(15000, function(){

      });
  });
});

好吧，你必须使用这个指令来重置fadeIn或队列中的其他事件：

$("#frase1").stop(false,true, true);
$("#frase2").stop(false,true, true);
$("#frase3").stop(false,true, true);