Jquery로 애니메이션 이벤트 켜고 끄기

Question

도움이 필요합니다. 버튼을 클릭하여 이벤트를 켤 수 있지만 동일한 버튼을 한 번 클릭하여 이벤트를 끌 수 없습니다. 또한 애니메이션 속도를 얻지도 못하고 작업하기가 쉽지 않습니다. 어떤 제안?

#services { 
    background: none repeat scroll 0 0 #FFFFFF; 
    margin: 0; 
    padding: 20px; 
    position: absolute; 
    right: -22%; 
    top: 0; 
    width: 22%; 
    min-height: 100%; 
    box-shadow: -2px 0 5px #000000; 
    -moz-box-shadow: -2px 0 5px #000000; 
    -webkit-box-shadow: -2px 0 5px #000000; 
    overflow: auto; 
} 

<script> 
    $(".btn-services").on('click', function(){ 
     $("#services").animate({right:'0%'}, 1000, 'linear'); 
    }); 
</script> 

Answer 1

당신은 애니메이션을 중지 JQuery와 .stop() (http://api.jquery.com/stop/)를 사용할 수 있습니다 (I JQuery와 배우는 중이에요). 당신은 그것을 현재 애니메이션되고 있는지 확인하기 위해 검사와 그 결합 할 수 있습니다 (코드는 테스트하지) :

$(".btn-services").on('click', function(){ 
    if($("#services").is(':animated')) { 
    $("#services").stop(); 
    } else { 
    $("#services").animate({right:'0%'}, 1000, 'linear'); 
    } 
}); 

보다는

당신이 토글을 사용할 수 있습니다/다른 경우.

애니메이션 속도 주위에 당신의 질문에 대해서는 및 완화 : 귀하의 애니메이션 기능의 현재

• 당신은 1000 명 MS로 설정 속도를, 그래서이 애니메이션은 (0 %를 잘 오른쪽 -22 %에서 이동을 완료한다 1 초). 예를 들어 3000으로 낮추면 애니메이션이 3 초 걸릴 것입니다.
• Jquery에는 기본적으로 'swing'과 'linear'의 두 가지 easing 함수가 있습니다. 현재 '선형'을 사용하여 애니메이션이 일정한 속도로 진행됩니다. 추가적인 여유 기능을 사용하려면 추가 플러그인을 포함해야합니다.