这是一个相当简单的问题，但我似乎无法弄清楚。
基本上我有一个 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();
}
)
【问题讨论】：
标签： javascript jquery hover
您的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);
}
)
【讨论】：
stop()。如果txtWrap 的大小基于其内容，那么很可能当一个元素淡出并被隐藏时，txtWrap调整大小并从鼠标指针下方移出，触发不需要的mouseleave。这应该确保fadein 总是发生。
.animate()，您可能会获得更好的成功。然后，如果您不希望隐藏褪色的元素，则不必这样做。我会更新我的答案。
我想我会发布这个，因为这些答案都不适合我。
*真正的参数告诉 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
在这种情况下，我求助于 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();
}
)
【讨论】：
当超级智能 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();
});
});
【讨论】：
如果你有这个东西：
$("#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);
【讨论】：