Warte auf das Hintergrundbild fadeOut beendet, bevor fadeIn ausgeführt wird, wenn der Mauszeiger auf den Menüpunkten steht

Question

F: Ich habe eine Inhaltsseite mit einem leeren div darin, das abhängig davon, welcher Menüpunkt über dem Bildschirm steht, verschiedene Hintergrundbilder ausblendet. Meine Frage ist, wie ich warten kann, bis das aktuelle Hintergrundbild ausgeblendet wird. Bevor der aktuelle Menüpunkt aktiviert ist, kann fadeIn eingeblendet werden. Momentan verhält sich die fadeIn-Hintergrundbildanimation so, als wäre sie bereits passiert, wenn ich schnell über einen anderen Menüeintrag schwebe.

Sie können meine Lösung und Beschreibung Bild unten sehen.

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

}); 

Fragen? Einfach fragen.

Vielen Dank im Voraus!

/// E

Answer 1

Nach .stop() Aufruf, aber vor .animate() Aufruf des Bildes in, stellen Sie die opacity-0 verblassen. Auf diese Weise wird die Fade-In-Animation vollständig ausgeführt. Andernfalls ist die Opazität möglicherweise bereits 0.25, daher wird sie nicht ausgeführt.

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

jsfiddle