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

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

本文关键字：背景 等待 图像 淡出 执行 菜单项 悬停 鼠标 fadeIn      更新时间：2023-09-26

Q:我有一个内容页，里面有一个空的div，根据悬停在哪个菜单项上，不同的背景图像会淡出。我的问题是，我如何才能等待当前背景图像淡出之前，当前菜单项悬停被允许淡出。目前，如果我将鼠标悬停在另一个菜单项上，则背景图像动画的行为就像已经发生过一样。

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

描述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

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

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

jsfiddle

相关文章：