jQuery 2.0에서 애니메이션을 전환하는 방법은 무엇입니까?

Question

jQuery .toggle() 이벤트를 사용하여 애니메이션 (확장/축소)을 토글하고 싶습니다. 문제점은 jQuery 1.8에서 토글이 사용되지 않으며 jQuery 1.9 이상에서 제거 된 jQuery 2.0을 사용하고 있다는 것입니다.

이 애니메이션을 토글하는 방법이 있습니까?

$("#expand").on("click", function(){ 
     var el = $("#text"), curHeight = el.height(), 
     autoHeight = el.css('height', 'auto').height(); 
     el.height(curHeight).animate({height: autoHeight}, 1000); 
}); 

Fiddle Demo

Answer 1

을 remeber. 이것은 단지 사업부가 현재 열려 있는지 여부에 따라 높이로 애니메이션, 클릭 할 때마다의 끝에서 플래그를 전환 :

$("#expand").data("open",false).on("click", function(){ 
    var $this = $(this), flag = $this.data("open"); 
    var el = $("#text"), curHeight = el.height(), 
    autoHeight = el.css('height', 'auto').height(); 
    el.height(curHeight).animate({height: flag?24:autoHeight}, 1000); 
    $this.data("open",!flag); 
}); 

JSFiddle

Answer 2

당신은 클래스의 예를 전환 할 수 있습니다. opened을 사용하여 컨트롤의 현재 상태를 무시하고 해당 요소가 해당 클래스를 가지면 코드를 변경합니다.

코드 :

는

$("#expand").on("click", function() { 
    var el = $("#text"), 
     curHeight = el.height(), 
     autoHeight = el.css('height', 'auto').height(); 
    if (el.hasClass('opened')) autoHeight="24px" 
    el.height(curHeight).animate({ 
     height: autoHeight 
    }, 1000); 
    el.toggleClass('opened') 
}); 

데모 : http://jsfiddle.net/9DBsu/

Answer 3

대신 .slideToggle()을 사용할 수 JSFiddle. 여기

$("#expand").click(function(){ 
    $("div#text").slideToggle("slow");        
}); 

Answer 4

가고, 단지 당신은 클릭으로 전환 달성하기 위해 사용 HTML5의 데이터 API를 사용할 수있는 상태와 초기 높이

check=false; 
bla=false; 
$("#expand").on("click", function(){ 
    if(!check){ 
     check=true; 
     var el = $("#text"), curHeight = el.height(), 
     autoHeight = el.css('height', 'auto').height(); 
     bla=curHeight; 
     el.height(curHeight).animate({height: autoHeight}, 1000); 
    }else{ 
     var el = $("#text"); 
     el.animate({height: bla}, 1000); 
     check=false; 
    } 
});