나는 애니메이션을 할 <div>
에서 200px
에 auto
높이입니다. 그래도 작동하지 않는 것 같습니다. 아무도 방법을 알고 있습니까?
코드는 다음과 같습니다.
$("div:first").click(function(){
$("#first").animate({
height: "auto"
}, 1000 );
});
답변
-
현재 높이를 저장하십시오.
var curHeight = $('#first').height();
-
일시적으로 높이를 자동으로 전환하십시오.
$('#first').css('height', 'auto');
-
자동 높이를 가져옵니다.
var autoHeight = $('#first').height();
-
다음으로 전환
curHeight
하여 애니메이션을 적용하십시오autoHeight
.$('#first').height(curHeight).animate({height: autoHeight}, 1000);
그리고 함께 :
var el = $('#first'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);
답변
IMO는 가장 깨끗하고 쉬운 솔루션입니다.
$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000 );
설명 : DOM은 초기 렌더링에서 이미 자동 높이로 설정했을 때 확장 된 div의 크기를 알고 있습니다. 이 속성은 DOM 노드에로 저장됩니다 scrollHeight
. 호출하여 jQuery 요소에서 DOM 요소를 가져와야 get(0)
속성에 액세스 할 수 있습니다.
높이를 자동으로 설정하기 위해 콜백 함수를 추가하면 애니메이션이 완료된 후 응답 성이 향상됩니다 (신용 chris-williams ).
$('#first').animate({
height: $('#first').get(0).scrollHeight
}, 1000, function(){
$(this).height('auto');
});
답변
이것은 기본적으로 Box9으로 대답과 같은 접근 방식하지만 좋은에 싸서 JQuery와 플러그인 일반 애니메이션과 같은 인수를 더 애니메이션 매개 변수가와 같은 코드를 반복 피곤해야하는 경우를 위해, :
;(function($)
{
$.fn.animateToAutoHeight = function(){
var curHeight = this.css('height'),
height = this.css('height','auto').height(),
duration = 200,
easing = 'swing',
callback = $.noop,
parameters = { height: height };
this.css('height', curHeight);
for (var i in arguments) {
switch (typeof arguments[i]) {
case 'object':
parameters = arguments[i];
parameters.height = height;
break;
case 'string':
if (arguments[i] == 'slow' || arguments[i] == 'fast') duration = arguments[i];
else easing = arguments[i];
break;
case 'number': duration = arguments[i]; break;
case 'function': callback = arguments[i]; break;
}
}
this.animate(parameters, duration, easing, function() {
$(this).css('height', 'auto');
callback.call(this, arguments);
});
return this;
}
})(jQuery);
편집 : 체인 가능하고 깔끔한 지금
답변
더 나은 솔루션은 JS를 사용하여 요소의 높이를 설정하지 않습니다. 다음은 고정 높이 요소를 전체 ( “자동”) 높이로 애니메이션하는 솔루션입니다.
var $selector = $('div');
$selector
.data('oHeight',$selector.height())
.css('height','auto')
.data('nHeight',$selector.height())
.height($selector.data('oHeight'))
.animate({height: $selector.data('nHeight')},400);
답변
이것은 작동하고 전에 솔루션보다 간단합니다.
CSS :
#container{
height:143px;
}
.max{
height: auto;
min-height: 143px;
}
JS :
$(document).ready(function() {
$("#container").click(function() {
if($(this).hasClass("max")) {
$(this).removeClass("max");
} else {
$(this).addClass("max");
}
})
});
참고 :이 솔루션에는 jQuery UI가 필요합니다
답변
var h = document.getElementById('First').scrollHeight;
$('#First').animate({ height : h+'px' },300);
답변
항상 #first의 하위 요소를 래핑하고 래퍼의 높이를 변수로 저장할 수 있습니다. 이것은 가장 예쁘거나 가장 효율적인 대답은 아니지만 속임수입니다.
여기 에 재설정을 포함 시킨 바이올린 이 있습니다.
그러나 당신의 목적을 위해 고기와 감자는 다음과 같습니다.
$(function(){
//wrap everything inside #first
$('#first').children().wrapAll('<div class="wrapper"></div>');
//get the height of the wrapper
var expandedHeight = $('.wrapper').height();
//get the height of first (set to 200px however you choose)
var collapsedHeight = $('#first').height();
//when you click the element of your choice (a button in my case) #first will animate to height auto
$('button').click(function(){
$("#first").animate({
height: expandedHeight
})
});
});