Ждать фонового изображения fadeOut для завершения до того, как fadeIn будет выполняться при наведении указателя на пункты меню

Question

Q: У меня есть страница контента с пустым div внутри нее, которая исчезает в разных фоновых изображениях в зависимости от того, какой пункт меню витает. Мой вопрос в том, как я могу дождаться, пока текущее фоновое изображение будет исчезать. Прежде чем текущий элемент меню будет парить, ему разрешено fadeIn. В настоящее время, если я нахожусь быстрее над другим пунктом меню, анимация фонового изображения fadeIn ведет себя так, как будто это уже произошло.

Вы можете увидеть мое изображение и изображение ниже.

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