Jquery가 맞춤 애니메이션을 토글합니다.

Question

링크를 클릭하면 트리거 할 애니메이션이 있습니다. 애니메이션을 별도로 실행하면 정상적으로 작동합니다. 하지만 jquery toggle()을 사용하면 더 이상 작동하지 않습니다. 아무도 왜 쉽게 볼 수 있습니까? 작동 toggle()없이

(별도 각을 실행) :

$('#sign-in-fx').click(function() { 
    $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart'); 
    //$('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart'); 
}); 

toggle()와 아무 일도 발생하지 :

$('#sign-in-fx').click(function() { 
    $('.login_form').toggle(
     function() { 
      $(this).animate({ width: '273' }, 'slow', 'easeInOutQuart') 
     }, 
     function() { 
      $(this).animate({ width: '1' }, 'slow', 'easeInOutQuart') 
     } 
    ); 
}); 

이 내가 다음과 같이도 할 수 있다고 생각 jQuery toggle animation

Answer 1

지금 나는이 원래하고 싶었던 것입니다 생각 :

$('#sign-in-fx').toggle(
     function() { 
      $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart') 
     }, 
     function() { 
      $('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart') 
     } 
); 

애니메이션을 요소에 toggle()를 호출했다

을,하지만 click를받을 요소를 호출 할 수있다 행사.

Answer 2

유사하다 :

$('#sign-in-fx').click(function() { 
    if (! $('.login_form').is(':animated')) { //if no animation running 
     if ($('.login_form').width() > 1) { 
      $('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart'); 
     } else { 
     $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart'); 
     } 

    } 
}); 

Answer 3

toggle() 사용하는 방식은 deprecated입니다! 당신이 전역을 좋아하지 않는 경우에 당신은 항상 데이터()를 사용할 수 있습니다,

var flag = true; 

$('#sign-in-fx').on('click', function() { 
    $('.login_form').stop(true, true) 
        .animate({ width: flag?'273':'1' }, 'slow', 'easeInOutQuart'); 
    flag=!flag; 
});​ 

FIDDLE

을 또는 :

을

는 플래그를 사용하여 직접 애니메이션 폭을 전환,과 같이

FIDDLE

Answer 4

$('#sign-in-fx').on('click', function() { 
    var flag = $('.login_form').data('flag')!=undefined?$('.login_form').data('flag'):true; 
    $('.login_form').stop(true, true) 
        .animate({ width: flag?'273':'1' }, 'slow', 'easeInOutQuart') 
        .data('flag', !flag); 
});​ 

는 확인이 이루어집니다 있습니까 document.ready? 귀하의 코드가 잘 보인다.

$(function() { 
     $('.login_form').toggle(
      function() { 
       $(this).animate({ width: '273' }, 'slow', 'easeInOutQuart') 
      }, 
      function() { 
       $(this).animate({ width: '1' }, 'slow', 'easeInOutQuart') 
      } 
    ); 
    });