Jquery停止Fadein / Fadeout
这是一个相当容易的，但我似乎无法弄明白。
基本上我有一个jqueryhover，在div中消失并在hover时淡出另一个。
当我快速上下几次时，它会来回脉冲约3-4秒，以完成所有淡入/淡出。
我通常使用.stop（）停止这些事情，但它似乎没有在这里做的伎俩。 如果我在an` $（“。txtWrap”）之前将鼠标hover在按钮上，我怎么能杀死淡入淡出。停止（）。hover（
$(".txtWrap").stop().hover( function () { $(this).find('.txtBock').fadeOut(); $(this).find('.txtDesc').fadeIn(); }, function () { $(this).find('.txtBock').fadeIn(); $(this).find('.txtDesc').fadeOut(); } ) 你的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); } )
以为我会发布这个，因为这些答案都不适合我。
*真正的参数告诉停止清除队列并转到动画的结尾
$(".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
在这样的时候，我转向Brian Cherne的天才.hoverIntent()插件 – 它非常流畅……等待用户在执行之前放慢速度。 您可以根据需要进行配置。
只需包含插件（它足够短我有时会将其直接放入我的脚本文件中）然后添加单词Intent ：
$(".txtWrap").hoverIntent( function () { $(this).find('.txtBock').fadeOut(); $(this).find('.txtDesc').fadeIn(); }, function () { $(this).find('.txtBock').fadeIn(); $(this).find('.txtDesc').fadeOut(); } )
当超级智能SO搜索引擎为我突出显示这个问题时，我正要发布一个类似的问题，所以我想我会为后代发布我自己的解决方案。
我拿了用户113716的解决方案并将其充实了一点。 在我的情况下，我隐藏和显示的div显示为display:none ，所以我不得不在CSS中添加opacity:0并告诉jQuery在开始动画不透明度之前设置.css({display:block}) 1来淡入
在淡出时，我不需要那个，但是我确实在将不透明度设置为零后将回调添加到.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(); }); });
如果你有这个东西：
$("#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);