メニュー項目をホバリングするときにfadeInが実行される前に、fadeOutが終了するまで待ちます。

Question

Q：空のdivを含むコンテンツページがあります。私の質問は、現在のメニュー項目がホバリングされる前にfadeInに許可される前に、現在の背景イメージがfadeOutを待つことができる方法です。現在、別のメニュー項目をすばやく表示すると、フェードインの背景画像アニメーションは既に発生しているように動作します。

下記の私の解決策と説明イメージを見ることができます。

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); 

}); 

質問？ただ聞いてください。

ありがとうございます！ .stop()を呼び出した後

/// E

Answer 1

が、画像をフェードインする.animate()を呼び出す前に、0にopacityを設定します。そうすることで、フェードインアニメーションが完全に実行されます。それ以外の場合、不透明度は既に0.25にある可能性があるため、実行されません。

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

jsfiddle