悬停在菜单项上时，在执行淡入之前等待背景图像淡出完成

Question

问：我有一个内容页面，里面有一个空的 div，根据鼠标悬停在哪个菜单项上，它会以不同的背景图像淡入淡出。我的问题是如何在当前菜单项悬停在允许淡入之前等待当前背景图像淡出。目前，如果我快速将鼠标悬停在另一个菜单项上，淡入背景图像动画的表现就像它已经发生一样。

您可以在下面看到我的解决方案和描述图片。

Description

HTML

<div class="bg"></div>

          <a id="first" href="{{ url('example') }}" class="buttonlink">

                   <div class="buttontitle">

                    <h1 class="buttontitleinner">example</h1>

                     <p class="buttoncaption">example</p>

                 </div>
            </a>

          <a id="second" href="{{ url('example2') }}" class="buttonlink">

                   <div class="buttontitle">

                    <h1 class="buttontitleinner">example2</h1>

                     <p class="buttoncaption">example2</p>

                 </div>
            </a>

jQuery

$("#first").hover(function () {

    $(".bg").css("background-image", 'url("./img1.png")').stop().animate({'opacity': 0.25}, 300);

    },function(){

    $(".bg").css("background-image", 'url("./img1.png")').stop().animate({'opacity': 0}, 500);

});


$("#second").hover(function () {

    $(".bg").css("background-image", 'url("./img2.png")').stop().animate({'opacity': 0.25}, 300);

    },function(){   

    $(".bg").css("background-image", 'url("./img2.png")').stop().animate({'opacity': 0}, 500);

});

有问题吗？随便问问。

谢谢！

///E

Answer 1

在调用 .stop() 之后，但在调用 .animate() 淡入图像之前，将 opacity 设置为 0。这样淡入动画将完全运行。否则，不透明度可能已经是 0.25，所以它不会运行。

$(".bg").css("background-image", 'url("./img1.png")').stop().css({opacity: 0}).animate({opacity: 0.25}, 300);

jsfiddle

悬停在菜单项上时，在执行淡入之前等待背景图像淡出完成

Wait for background image fadeOut to finish before fadeIn executes when hovering on menu items

javascript

jquery

fadeout

fadein