첫 번째 애니메이션이 완료되기 전에 두 번째 애니메이션 실행

Question

나는 mouseleave 애니메이션이 뒤 따르는 마우스 오버 애니메이션이 있습니다. 불행히도 mouseleave 이벤트가 트리거 될 때까지 첫 번째 애니메이션이 완료되지 않은 경우 두 번째 애니메이션이 실행되지 않습니다.

.wrapper { 
    background-color:red; 
    padding:10px; 
    position:relative; 
    width:100px; 
} 

.top { 
    background-color:blue; 
    height:100px; 
    position:relative; 
    width:100px; 
} 

.bottom { 
    background-color:green; 
    cursor:pointer; 
    height:40px; 
    width:100px; 
} 

.popup { 
    background-color:yellow; 
    bottom:-10px; 
    display:none; 
    left:19px; 
    opacity:0; 
    padding:10px; 
    position:absolute; 
} 

JQuery와에게

HTML

<div class="wrapper"> 
    <div class="top"> 
    <div class="popup"> 
     popup 
    </div> 
    </div> 
    <div class="bottom"></div> 
</div> 

CSS 아래에 내 코드를 참조

나는 JSFiddle 페이지 내 코드 포함했다

var popupVisible = false; 

$('div.bottom').mouseover(function() { 
    if (popupVisible === false) { 
    $(this).parent().children('.top').children('.popup').css({'display':'block'}).animate({ 
     opacity:1, 
     bottom:+10 

    }, 500, function() { 
     popupVisible = true; 
    }); 
    } 
}); 

$('.wrapper').mouseleave(function() { 
    if (popupVisible === true) { 
    $(this).children('.top').children('.popup').animate({ 
     opacity:0, 
     bottom:-10 

    }, 300, function() { 
     $(this).css({'display':'none'}); 
     popupVisible = false; 
    }); 
    } 
}); 

-https://jsfiddle.net/n0uxaw8c/1/

를 내가 mouseleave 이벤트가 트리거 될 때 첫 번째 애니메이션을 중지 한 다음 두 번째 애니메이션을 실행해야합니다. 어떤 도움 :)이 있지만

Answer 1

에 대한

많은 감사가 귀하의 질문에 확실히 대답하지 않습니다, 당신은 또한 더 원활하게 실행 CSS,이 작업을 수행 할 수있다.

CSS의 transition 속성을 사용하여 멋진 애니메이션을 만들 수 있습니다.

내가 여기 JSFiddle 만들었습니다 https://jsfiddle.net/n0uxaw8c/2/