배경 이미지 대기 fadeOut이 메뉴 항목을 가리키면 fadeIn이 실행되기 전에 완료

Question

Q : 빈 페이지가있는 빈 div가있는 페이지가 있는데, 어떤 메뉴 항목이 떠 다니는 지에 따라 다른 배경 이미지가 사라집니다. 내 질문은 어떻게 현재 메뉴 항목이 떠오르게됩니다 fadeIn 수 있습니다 전에 현재 배경 이미지 fadeOut 기다릴 수 있습니다. 현재 다른 메뉴 항목 위로 빠르게 이동하면 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); 

}); 

질문? 그냥 물어봐.

미리 감사드립니다.

.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