Jquery 토글이 제대로 작동하지 않습니까?

Question

클릭하려는 단추가 있습니다 (제 경우에는 '.circle'입니다). 그것을 클릭하면 #data div가 페이드 인되어 'margin-top : 50px'로 애니메이트되기를 원합니다. 그런 다음 사용자가 두 번째로 토글 버튼을 클릭하면 'margin-top : 0px'로 움직입니다. 그러면 페이드 아웃됩니다.

그러나 내가 실행 한 문제는 토글을 세 번째로 클릭하면 첫 번째 함수를 다시 실행해야한다는 것입니다. 대신 첫 번째 기능이 다시 실행되기 전에 이상한 일을하고 마진이 50px로 다시 설정됩니다.

정말 도움이 될 것입니다. 다음은 JSFiddle입니다. 동일한 코드를 사용하면 여러 번 클릭 한 후 문제가 발생합니다. 또 다른 문제는 처음에는 작동하지 않지만 두 번째 클릭에는 작동하는 경우입니다.

http://jsfiddle.net/sN8Tn/

아픈 또한 아래 JQuery와의 비트 게시 다음 .click() 기능을 제거

$(".button").click(function(){ 

     $(".button").toggle(

     function(){ 
      $("#showme").fadeIn(500, 
      function(){ 
       $("#showme").animate({ "margin-top" : "50px" }, 500, 'linear'); 
      } 
     ); 

     }, 

     function(){ 

      $("#showme").animate({ "margin-top" : "0px" }, 500, 'linear', 
      function(){ 
       $("#showme").fadeOut(500); 
      } 
     ); 

     }); 

});​ 

Answer 1

합니다. 클릭은 .toggle() 기능과 함축되어 있습니다. jQuery .toggle()jsFiddle

$(".button").toggle(
function() { 
    $("#showme").fadeIn(500, function() { 
     $("#showme").animate({ 
      "margin-top": "50px" 
     }, 500, 'linear'); 
    }); 
}, function() { 
    $("#showme").animate({ 
     "margin-top": "0px" 
    }, 500, 'linear', function() { 
     $("#showme").fadeOut(500); 
    }); 
});​