Jquery 停止淡入/淡出

Posted 2023-05-08

【中文标题】Jquery 停止淡入/淡出

【英文标题】：Jquery Stop Fadein / Fadeout

【发布时间】：2011-02-17 20:28:48

【问题描述】：

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

基本上我有一个 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();
  
)

【参考方案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);
  
)

【讨论】：

我在第一次悬停时尝试了该方法，但之后我永远无法让 .txtDesc 重新悬停..

@Wes - 我从淡入中删除了stop()。如果txtWrap 的大小基于其内容，那么很可能当一个元素淡出并被隐藏时，txtWrap调整大小并从鼠标指针下方移出，触发不需要的mouseleave。这应该确保fadein 总是发生。

这似乎更接近一点，但是当我过早地将鼠标移出时，我会留下一个半透明的 div。因此，如果我以 50% 的不透明度鼠标移出，当我再次鼠标移入时，它只会淡入 50%。有办法重置吗？

出于这个原因，我个人倾向于不使用其中一些类型的功能。使用.animate()，您可能会获得更好的成功。然后，如果您不希望隐藏褪色的元素，则不必这样做。我会更新我的答案。

太棒了。那是个好主意。这是我的最终代码： $('.txtDesc').animate(opacity:0, 1); $(".txtWrap").hover( function () $(this).find('.txtBlock').stop().animate(opacity:0, 500); $(this).find(' .txtDesc').show().animate(opacity:1, 500); // $('#timeTxt').fadeOut(); // $('#timeTxtDesc').fadeIn(); , function () $(this).find('.txtBlock').animate(opacity:1, 500); $(this).find('.txtDesc').stop().animate(opacity: 0, 500); )

【参考方案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

【讨论】：

像你一样，其他解决方案不起作用。然而，我最终还是选择了$(this).find('.txtBock').stop(true, true) 来阻止淡出。 +1

【参考方案3】：

在这种情况下，我求助于 Brian Cherne 的天才.hoverIntent() plugin -- 非常流畅...等到用户放慢速度再执行。您可以根据需要对其进行配置。

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

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

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

【参考方案4】：

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

我采用了 user113716 的解决方案并对其进行了一些充实。在我的例子中，我隐藏和显示的 div 以 display:none 开始，所以我必须在 CSS 中添加 opacity:0 并告诉 jQuery 在它开始将不透明度设置为 1 以淡出之前设置 .css(display:block)在。

在淡出时，我不需要它，但在将不透明度设置为零后，我确实添加了一个回调到 .hide() div。

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

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();
    );
);

【参考方案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);