Question

我是jQuery的初学者！

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

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

我希望如果用户将鼠标悬停在仍然使用淡入淡出的div上，则没有任何反应。如果你悬停一个完全显示的div，那么图像将启动fadeIn。

这是我的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;
}

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

谢谢！

This is the test page

Answer 1

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

$(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 2

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

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

淡入效果将在默认队列（“fx”）中的待定动画完成后开始。这是展示这个概念的a fiddle;也许它会指出你正确的方向。

Answer 3

我相信这会做你想要的。基本上，您需要做的是等到<div>完全淡入，然后再绑定图像的悬停事件。您可以通过在<div> fadeIn的callback中执行事件绑定来实现此目的。此外，由于您只在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/

jQuery，只有在页面加载结束时淡入淡出才会激活

3 个答案: