JQuery FadeOut发生在错误的时间
提问于 2012-11-20 22:37:57
我有以下代码：
$(document).ready(function () {
$("#full-btns").children().delay(4000).fadeOut("slow");
$('#full-btns').hover(function() {
$('#full-btns').children().stop().animate({opacity:'100'});
$('#full-btns').children().show();
}, function() {
$("#full-btns").children().fadeOut("slow");
});加载页面时，#full-btns元素在淡出之前会显示4000ms。我遇到的问题是，如果用户在#full-btns元素仍然可见的情况下将鼠标悬停在该元素上，则会导致它淡出，因为在悬停时会调用$("#full-btns").children().fadeOut("slow");。我希望#full-btns在悬停时始终可见。
当页面加载时，将鼠标悬停在红色div上，注意它是如何淡出的。这是不可取的。当悬停在红色div上时(当它可见时)，它应该保持可见。
更新：http://jsfiddle.net/gazedge/nhBBc/ (现在包含解决方案)
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-11-20 23:32:03
使用setInterval和clearInterval；
$('#full-btns').hover(function() {
clearInterval(refreshIntervalId);
$('#full-btns').children().stop().animate({opacity:'100'});
$('#full-btns').children().show();
}, function() {
$("#full-btns").children().fadeOut("slow");
});
var refreshIntervalId = setInterval(function() {
$("#full-btns").children().fadeOut("slow");
}, 4000);
Stack Overflow用户
发布于 2012-11-20 23:06:55
如果我没有误解这个问题--难道你不能在你的悬停调用结束时使用return false;来防止事件冒泡吗？
http://www.quirksmode.org/js/events_order.html
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
Stack Overflow用户
发布于 2012-11-21 09:10:15
你唯一要做的就是在任何人悬停之前清除所有动画。
$("#full-btns").children().delay(4000).fadeOut("slow");
$('#full-btns').hover(function() {
$('#full-btns').children().stop(true, true); // Stop the fade-out animation
$('#full-btns').children().stop().animate({opacity:'100'});
$('#full-btns').children().show();
}, function() {
console.log('fadeOout called');
$("#full-btns").children().fadeOut("slow");
});注意:当你第一次悬停并(在你的代码中)淡出时，这不是因为div，而是因为它刚刚完成了你之前应用的动画。你的第一行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13483422
复制相关文章
点击加载更多
腾讯云开发者
