Jquery停止Fadein / Fadeout

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()你需要在动画函数中添加一个回调函数。

$(".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

我想我会发布这篇文章，因为这些答案对我来说都不起作用。

* true params告诉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() plugin --它非常smooth...waits，直到用户在执行之前放慢了足够的速度。您可以根据需要对其进行配置。

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

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

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