jquery 이전 애니메이션이 완료되었을 때만 호버 - 아웃 애니메이션에 지연 추가

Question

이미지의 속성이있는 경우이를 기반으로 이미지 캡션을 애니메이션하는 작은 jQuery 스 니펫이 있습니다.

괜찮 으면 좋겠지 만 하나의 작은 문제가 있습니다. 이전 slideIn 애니메이션 가 완전히 완료하면 나는 호버 출력 (slideUp) 애니메이션에 delay하지만 만를 원한다. 기본 시나리오에서 :

시나리오 1 : 사용자가 이미지를 가리키고 캡션이 완전히 움직입니다. 사용자가 튀어 나와 2 초 동안 애니메이션 지연 (캡션이 고정 된 상태)이 유지 된 다음 애니메이션이 재생됩니다.

시나리오 2 : 사용자가 이미지를 가리켜 캡션이 애니메이션에 들어가기 시작하지만 완료되기 전에 사용자가 튀어 나오게됩니다. 애니메이션은 지연없이 즉시 중지되고 애니메이션 처리해야합니다.

시나리오 1이 완벽하게 작동합니다. 시나리오 2는 그렇지 않습니다. 지연은 부분적으로 움직이는 요소가 미끄러지기 전에 발생합니다. 내 코드에서이 결함을 볼 수는 있지만 해결 방법을 찾지 못하는 것 같습니다.

Fiddle

, 그리고 현재 스크립트 :

$('.pv-inner').hover(function() { 

    var img = $(this).find('img:first'); 
    var text = img.attr('alt'); 

    if (text !== undefined) { 
     //remove any existing captions 
     $(this).find('.kppImageCaption').remove(); 

     //insert the new caption 
     img.after('<div class="kppImageText">' + text + '</div><div class="kppImageCaption"></div>'); 

     //animate it in 
     $(this).find('.kppImageCaption').stop().slideDown('slow').animate({ 
      opacity: 0.6 
     }, { 
      queue: false, 
      duration: 'slow', 
      complete: function() { 
       $(this).parent().find('.kppImageText').fadeTo(1000, 1); 
      } 
     }); 
    } 
}, function() { 

    //on hover out animate it out. Here is the problem. I only want the delay 
    //to occur if the above hover over animation completed - currently it delays 
    //in all cases. 
    $(this).find('.kppImageCaption, .kppImageText').stop().delay(2000).slideUp('slow', function() { 
     $(this).remove(); 
    }); 

}); 

편집 :

Final working fiddle. 길을 인도하는 데 도움이 될 수 있습니다.

Answer 1

변수 만들기, 그냥 그에게 그것을 애니메이션을 시작하기 전에 var animationStatus = false 를 호출 할 수 complete 기능에 animationStatus = true

을 설정 (jQuery를이 문서를 애니메이션 참조) 숨어 책임이 함수에서 animationStatus = false

을 설정 - 생성 if 문. animationStatus === false - 지연. animationStatus === true - 지연없이.

행운을 빈다.