jQuery 애니메이션이 두 번째로 작동하지 않습니다.

애니메이션을 적용하고 싶은 영역이 있는데, 애니메이션은 처음 트리거를 클릭 할 때만 작동합니다. 트리거를 두 번째 클릭하면 애니메이션이 되돌립니다. 여기 내 코드가있다.jQuery 애니메이션이 두 번째로 작동하지 않습니다.

$(document).ready(function() { 

    //We hide the panel 
    $('.drawer-content').css('marginTop', '-140px'); 

    //When the anchor is clicked the panel will slide up   
    $('.open-drawer').click(function(){ 
     $('.drawer-content').animate({marginTop: '0px',}, 1000); 

     //Append active class to anchor 
     $(this).removeClass('open-drawer').addClass('active'); 

     //On click the active link will cause the panel to slide down 
     $('.active').click(function() { 
      $(this).removeClass('active').addClass('open-drawer'); 
      $('.drawer-content').animate({marginTop: '-140px',}, 1000); 
     }); 

    }); 

});//End DOM Load

여기에 편집 가 요구하는 사람들을위한 라이브 예입니다

<div class="drawer-content" id="signin"> 
</div><!--End #signin-->

JQuery와 html로. 감사! http://livecoding.io/3854307

의견을 통해이 설명을 이해할 수 있습니다. 처음에는 작동하지만 애니메이션을 다시 실행하려고하면 상자가 아래로 슬라이드 한 다음 다시 오른쪽으로 다시 슬라이드됩니다. 내가 도대체 뭘 잘못하고있는 겁니까?

출처

2012-10-08 jwinton

더 나은 도움을 받으려면 livecoding.io 또는 jsfiddle로 예제를 생성하십시오. –

이전 주석 작성자와 동의하십시오. 또한 활성 상태이고 열려있을 때 2 개의 클립을 사용하는 것은 사용 방법과 달리 복잡하다는 것을 지적하고 싶습니다. 또한 @GabrielFlorit이 jsfiddle을 요청한 이유를 돕기 위해 HTML을 포함한 코드 구조에 대한 더 많은 정보가 필요합니다 – xception

html 코드를 공유하여 더 나은 이해를 얻을 수 있습니까? –

윌 .slideToggle 사용할 수 있습니까? 설명 : 일치하는 요소를 슬라이딩 동작으로 표시하거나 숨 깁니다.

업데이트!

jquery 코드를이 코드로 바꾸어보세요.

//We hide the panel 
$('.drawer-content').hide(); 

//When the anchor is clicked the panel will slide up   
$('.open-drawer').click(function(){ 
    $('.drawer-content').slideToggle(); 

});

출처

2012-10-08 19:15:06 Brutnus

Yippie! 내 첫 번째 수정! – Brutnus

감사! 그것은 효과가 있었다. – jwinton

당신의 HTML에 따라 다르지만, "클릭"이 .open-drawer에 등록되어 있으면 애니메이션이 시작되고 click 처리기가 .active로 설정됩니다.

.active .open-drawer의 부모 (HTML에서) 인 경우 DOM에서 위쪽으로 버블 링되기 때문에 동일한 클릭이 감지되어 애니메이션을 현재 애니메이션에 추가합니다.

첫 번째 제안은 event.stopPropagation()을 첫 번째 이벤트 처리기에 추가하고 어떤 일이 발생하는지 보는 것입니다.

그러나 HTML이나 예제 페이지가 없으면 문제를 발견하고 디버그하기가 어렵습니다.

당신을 위해

(또한 http://api.jquery.com/event.stopPropagation/ 참조)

출처

2012-10-08 19:00:12 Claude

jQuery 애니메이션이 두 번째로 작동하지 않습니다.

답변

관련 문제