Jquery停止Fadein/Fadeout

Question

这是一个相当容易的,但我似乎无法弄明白.

基本上我有一个jquery悬停,在div中消失并在悬停时淡出另一个.

当我快速上下几次时,它会来回脉冲约3-4秒,以完成所有淡入/淡出.

我通常使用.stop()停止这些事情,但它似乎没有在这里做的伎俩.如果我在an` $(".txtWrap")之前将鼠标悬停在按钮上,我怎么能杀死淡入淡出.停止().悬停(

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

以为我会发布这个,因为这些答案都不适合我.

*真正的参数告诉停止清除队列并转到动画的结尾

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