jQuery，仅在页面加载淡入结束时悬停活动

Question

我是 jQuery 的初学者！

我需要一些 div 在页面加载时淡入淡出，我可以做到。 我需要让它们以不同的延迟和时间显示，我可以做到。 当您将鼠标悬停在相对 div 时，每个 div 都有一个会淡入的图像，我可以做到。

问题是悬停时图像的动画，如果div的fadeIn没有结束，则仍然开始。

我希望，如果用户悬停仍然使用 fadeIn 的 div，则不会发生任何事情。 如果您将鼠标悬停在完全显示的 div 上，则图像会开始淡入。

这是我的 HTML

<div id="immagine1">
<img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/>
</div>
<div id="immagine2">
<img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/>
</div>

这是我的 jQuery

$(window).load(function () {

$('#immagine1').hide();
$('#immagine1').stop().fadeIn(1000);
$('#immagine2').hide();
$('#immagine2').stop().delay(2500).fadeIn(2500);
$('div').hover(
        function(){ $(this).find('img').fadeIn(1000);
    });

     });

还有img css

img{
display:none;
}

如何在页面加载时“禁用”悬停效果直到淡入结束？

谢谢！

This is the test page

Answer 1

我相信这会满足您的需求。基本上，您需要做的是等到<div> 完全淡入，然后再为图像绑定悬停事件。您可以通过在callback 中为<div>fadeIn 执行事件绑定来实现此目的。此外，由于您只在 hoverIn 事件（而不是 hoverOut）上做某事，您可以使用 .mouseenter() 而不是 .hover()

代码如下：

$(function() {
    $('div img').hide();
    $('#immagine1').hide().fadeIn(5000, function() {
        $('div').mouseenter(function() {
            $(this).find('img').fadeIn('1000');
        });
    });
});

这是它的工作演示：http://jsfiddle.net/vYz3t/

Answer 2

看，我不明白你真正的问题，但试试这个：

$(window).load(function () {
    $('#immagine1, #immagine2').hide();
    $('#immagine1').hover(
            function(){
                $(this).fadeIn(1000);
            },
            function(){
                $(this).fadeOut(1000);
            }
    );
    $('#immagine2').hover(
            function(){
                $(this).fadeIn(1000);
            },
            function(){
                $(this).fadeOut(1000);
            }
   );
});

或者去jQuery hover docs看看

Answer 3

我不确定您要达到什么目的，但也许您可以通过使用.queue() 将悬停动画显式放置在队列末尾来获得您想要的效果：

$('div').hover(function() {
  $(this).queue(function() {
    $(this).find('img').fadeIn(1000);
  });
});​

淡入效果将在默认队列（“fx”）中的待处理动画完成后开始。这是a fiddle 演示这个概念；也许它会为您指明正确的方向。