2013-10-09 11 views
0

사용자가 화살표를 클릭하면 div가 아래로 슬라이드하고 맥동하는 화살표 애니메이션이 멈출 때 화살표의 이미지가 깜빡입니다. 사용자가 화살표를 다시 클릭하면 div가 위로 움직이고 화살표가 계속 맥동합니다.펄스 애니메이션을 전환 할 수 있습니까?

토글 할 수 있습니다. 나는 맥박 할 수있다. 그러나, 나는 펄싱 애니메이션을 토글하는 방법에 대해 확신 할 수 없다. 누군가가 올바른 방향으로 나를 가리킬 수 있다면 그것은 좋을 것입니다!

감사합니다.

$(document).ready(function(){ 
{ 
    $(".arrow_down_grey").effect("pulsate", 
     {times:5}, 3000); 
    } 
    $('.arrow_down_grey').click(function(){ 
     $(".arrow_down_grey").stop().effect(); 
     $(".hiddenDiv").slideToggle(); 

}); 
}); 

답변

1

jQuery는 애니메이션을 중단하는 방법이 .stop()입니다. 클릭 수를 듣고 .stop()을 사용하여 애니메이션을 시작/정지해야합니다. 애니메이션 큐를 지우려면 true 플래그를 사용해야한다고 생각하고 있습니다. 따라서 정지는 애니메이션을 "일시 중지"하는 것이 아니라 여러분에게 달려 있습니다. 그런 다음 div를 다른 방법으로 전환 할 때 클로저를 사용하여 "토글 상태"를 추적하고 애니메이션을 다시 시작하십시오.

$('#animation').stop(false); 

jQuery를 .stop 문서 : http://api.jquery.com/stop/

+0

감사합니다. 나는 이것을 알고있다. 그러나 애니메이션을 다시 시작하려면 어떻게해야합니까? – danelig

+0

애니메이션 코드를 제공 할 수 있습니까? 만약 그렇다면, 클로저를 추가하고 다시 시작/해제/해제하는 방법을 보여 드리겠습니다. –

+0

많은 도움을 주셔서 감사합니다. 나는 더 코드를 작성하고 코드를 게시 할 것이다. – danelig

0
$(document).ready(function() { 
    function pulsate() { 
     $(".pulsate").animate({ opacity: 0.2 }, 1200, 'linear') 
        .animate({ opacity: 1 }, 1200, 'linear', pulsate) 
        .click(function() { 
         $(this).animate({ opacity: 1 }, 1200, 'linear'); 
         $(this).stop(); 
        }); 
     } 

    pulsate(); 
}); 

이 코드는 작동하지만 어떻게 다시 펄스 애니메이션을 시작할 것이라고?