我的jQuery淡入此处：http://dougie.thewestharbour.com/
当您将鼠标悬停在.main-overdiv上时，我希望它消失，然后当您将鼠标移开它时，我希望它消失。
但是，您可以看到它现在正在闪烁。我猜这是因为div消失了，所以当它淡出时它被视为mouseout，但是我不确定如何解决它。
这是我的JavaScript：
$(document).ready(function () {
$('.main-overlay').hover(
//Mouseover, fadeIn the hidden hover class
function() {
$(this).fadeOut('1000');
},
//Mouseout, fadeOut the hover class
function() {
$(this).fadeIn('1000');
}).click (function () {
//Add selected class if user clicked on it
$(this).addClass('selected');
});
});
这是overlay div附加到的项目之一：
<li><div class="main-overlay"></div><span class="caption">The store front</span><img src="http://dougie.thewestharbour.com/wp-content/uploads/store-front.jpg" alt="store front" title="store-front" width="730" height="360" class="alignnone size-full wp-image-98" /></li>
谢谢，
韦德
最佳答案
发生这种情况是因为fadeOut在其末尾有一个display:none，因此在fadeOut完成后移动鼠标时，它将触发取消悬停功能。相反，只需animate opacity：
$('.main-overlay').hover(function() {
$(this).animate({opacity: 0}, 1000);
}, function() {
$(this).animate({opacity: 1}, 1000);
})
Example →