jQuery，仅当页面加载淡入结束时悬停才处于活动状态

Question

我是 jQuery 的初学者！

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

问题是，如果 div 的淡入未结束，则悬停时图像的动画仍会开始。

我希望如果用户将鼠标悬停在仍然带有 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;
}

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

谢谢！

这是测试页面

Answer 1

我相信这会满足您的需求。基本上，您需要做的是等到

完全淡入，然后再绑定图像的悬停事件。您可以通过在 回调 中执行事件绑定来实现此目的div> 淡入。此外，由于您只在悬停事件（而不是悬停事件）上执行某些操作，因此您可以使用 .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悬停文档

Answer 3

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

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

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