Javascript Jquery 停止淡入/淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2805906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Stop Fadein / Fadeout
提问by wesbos
This is a fairly easy one, but I cant seem to figure it out.
这是一个相当容易的，但我似乎无法弄清楚。
Basically I have a jquery hover that fades in a div and fades out the other upon hover.
基本上我有一个 jquery 悬停，它会在一个 div 中淡出并在悬停时淡出另一个。
When I quickly hover on and off a few times it pulses back and forth for about 3-4 seconds to finish all those fade in/fade outs.
当我快速悬停几次时，它会来回脉冲约 3-4 秒以完成所有这些淡入/淡出。
I generally stop these things with .stop(), but it doesnt seem to do the trick here. How can I kill the fade in if I hover off the button before the an`$(".txtWrap").stop().hover(
我通常用 .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();
}
)
回答by user113716
Your stop()is misplaced.
你stop()的放错地方了。
Try this:
尝试这个：
$(".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();
}
)
EDIT:
编辑：
This will animate the elements' opacity without hiding the element. If you want them hidden, use .hide()you'll need to add a callback to the animate function.
这将在不隐藏元素的情况下为元素的不透明度设置动画。如果你想隐藏它们，使用.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);
}
)
回答by Daniel M.
Thought I would post this because none of these answers worked for me.
我以为我会发布这个，因为这些答案都不适合我。
*The true params tell stop to clear the queue and go to the end of the animation
*真正的参数告诉停止清除队列并转到动画结尾
$(".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();
}
)
Link: http://forum.jquery.com/topic/jquery-hover-events-cant-keep-up-with-fadein-and-fadeout-events-queue
链接：http: //forum.jquery.com/topic/jquery-hover-events-cant-keep-up-with-fadein-and-fadeout-events-queue
回答by brandonjp
In times like this I turn to Brian Cherne's genius .hoverIntent()plugin-- It's quite smooth...waits until the user has slowed down enough before executing. You can configure it to your needs.
在这种情况下，我求助于 Brian Cherne 的天才.hoverIntent()插件——它非常流畅......等待用户在执行之前放慢了足够的速度。您可以根据需要对其进行配置。
Just include the plugin (it's short enough I'll sometimes place it directly into my script file) then add the word Intent:
只需包含插件（它足够短，我有时会将它直接放入我的脚本文件中）然后添加单词Intent：
$(".txtWrap").hoverIntent(
function () {
$(this).find('.txtBock').fadeOut();
$(this).find('.txtDesc').fadeIn();
},
function () {
$(this).find('.txtBock').fadeIn();
$(this).find('.txtDesc').fadeOut();
}
)
回答by Blazemonger
I was about to post a similar question when the superintelligent SO search engine highlighted this question for me, so I thought I'd post my own solution for posterity.
当超级智能SO搜索引擎为我突出显示这个问题时，我正要发布一个类似的问题，所以我想我会为后代发布我自己的解决方案。
I took user113716's solution and fleshed it out a bit. In my case, the div I was hiding and showing started out as display:none, so I had to add opacity:0to the CSS and tell the jQuery to set .css({display:block})before it started animating the opacity to 1to fade in.
我采用了 user113716 的解决方案并将其充实了一下。在我的例子中，我隐藏和显示的 div 开始是display:none，所以我必须添加opacity:0到 CSS 并告诉 jQuery.css({display:block})在它开始动画不透明度1以淡入之前进行设置。
On the fade out, I didn't need that, but I did add a callback to .hide()the div after animating the opacity to zero.
在淡出时，我不需要那个，但是.hide()在将不透明度设置为零后，我确实向div添加了一个回调。
Here's a fiddle illustrating what I ended up with:
这是一个小提琴，说明了我最终得到的结果：
http://jsfiddle.net/mblase75/wx2MJ/
http://jsfiddle.net/mblase75/wx2MJ/
The relevant JavaScript:
相关的 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();
});
});
回答by Francesco
If you have this thing:
如果你有这个东西：
$("#frase1").fadeIn(5000, function(){
$("#frase2").fadeIn(10000, function(){
$("#frase3").fadeIn(15000, function(){
});
});
});
all right, you must use this instruction to reset fadeIn or other event in queue:
好的，您必须使用此指令重置淡入淡出或队列中的其他事件：
$("#frase1").stop(false,true, true);
$("#frase2").stop(false,true, true);
$("#frase3").stop(false,true, true);
