DIV를 전체 높이로 애니메이트하고 정의 된 높이로 토글합니다.

Question

버튼을 누르면 전체 높이로 애니메이션을 만들고 버튼을 다시 클릭하면 원래 높이로 돌아갑니다. div의 전체 높이는 단어 수가 다른 텍스트를 포함하고 있으므로 자동으로 표시됩니다. 아래 코드를 시도했지만 제대로 작동하지 않습니다.

CSS의 :

.category_brief{ 
    text-align:justify; 
    height:100px; 
    overflow:hidden; 
} 

예 1 :이 코드는 전체 높이에 열 때 DIV 애니메이션,하지만 다시 옛 높이에 오는 동안 애니메이션을하지 않습니다.

$(".slide").toggle(function(){ 
    $('.category_brief').animate({height:'100%'},200); 
    },function(){ 
    $('.category_brief').animate({height:100},200); 
    }); 

예 2 :이 코드의 출력 예 3

var toggle = true, oldHeight = 0; 

$('.slide').click(function(event) { 
    event.preventDefault(); 

    var $ele = $('.category_brief'); 
    var toHeight = ((toggle = !toggle) ? oldHeight : newHeight); 

    oldHeight = $ele.height(); 
    var newHeight = $ele.height('auto').height(); 
    $ele.animate({ height: toHeight }); 

}); 

예 1

의 것과 동일하다 :이 코드는 그 전체 높이에 DIV를 애니메이션하지만 전환하지 않는다. @chazm에서 생각이 해결 ..

@chazm : 아이디어에 대한 감사 내가 안돼서로

var slide = $('.slide'); 
    var slidepanel = $('.category_brief'); 
    // On click, animate it to its full natural height 
    slide.click(function(event) { 
     event.preventDefault(); 
    var oldHeight, newHeight; 

    // Measure before and after 
    oldHeight = slidepanel.height(); 
    newHeight = slidepanel.height('auto').height(); 

    // Put back the short height (you could grab this first 
    slidepanel.height(oldHeight); 
    slidepanel.animate({height: newHeight + "px"}); 
    }); 

가능하면 .. 또한

업데이트를 약간의 설명을 제공하십시오 . 1과 3의 예제를 결합하여 작동 시켰습니다 ... 누군가가 필요로 할 경우에 대비 한 코드가 있습니다.

var slidepanel = $('.category_brief'); 
    $(".slide").toggle(function(){ 
    var oldHeight, newHeight; 

    // Measure before and after 
    oldHeight = slidepanel.height(); 
    newHeight = slidepanel.height('auto').height(); 

    // Put back the short height (you could grab this first 
    slidepanel.height(oldHeight); 
    slidepanel.animate({height: newHeight + "px"}) 
    },function(){ 
    $('.category_brief').animate({height:100},300); 
    }); 

Answer 1

'자동'높이로 작업하면 항상 까다로운 작업입니다. 나는 여러분의 예제에 다른 이슈가 있다고 생각한다.

1) 브라우저가 올바른 100 % 높이를 정의 할 수 없습니다. 가능한 해결책 - 모든 부모에게 높이를 정의하십시오. 100 % (html 태그까지)로 설정하거나 가장 가까운 부모를 친척으로 설정하십시오 (높이는 가장 가까운 상대 부모로부터 계산되므로). 당신은 전체 페이지의 100 % 사업부를 애니메이션을 적용 할 경우 -이 코드는 그를 확인할 수 없습니다 다시 전환하기로

3

을) 생각 이상으로 절대 위치

2) 같은 생각 지금은 더 낮아져야합니다. 왜 절대적으로 확신 할 수 없습니다. 아마도 100 %에서 '자동'높이가 잘못된 것으로 설정 되었기 때문일 수 있습니다. 해당 기능을 다시 토글 한 후 계산 된 탭에있는 값을 파이어 버그에 체크인 할 수 있습니다. 아마 그것은 당신에게 단서를 줄 것이다

2)와 3)을 결합하여보십시오. 아이디어 - 토글이 true 인 경우 (낮추면) newHeight = slidepanel.height ('100')를 설정합니다.

Answer 2

솔루션은 구현 요구 사항에 따라 다릅니다. 처음에 div가 높이가 100px가되어야하고 클릭 할 때 알 수없는 높이까지 최대화된다면 다음과 같은 해결책이 효과적입니다. 당신이

<div class="outer"> 
    <div class="wrapper">Content of unknown length here</div> 
</div>  

과 CSS

div.wrapper { position:relative; height:100px; overflow:hidden; } 
div.outer { position:absolute; height:auto; } 

에 유사한 구조를 가지고 있다면 당신은 잘라 100 픽셀에 맞지 않는 내용으로, 높이 100 픽셀입니다 사업부를 얻을 것입니다. 이제 원하는 버튼을 누르면 래퍼 div의 높이를 얻을 수 있습니다. 콘텐츠가 길기 때문에 (심지어 상위 100px 만 보더라도) 바깥 div의 높이를 설정합니다.좋아요

var newHeight = $('div.wrapper').height(); 
$('div.outer').animate({height:newHeight},200); 

다음으로 전체 내용을 표시하도록 외부 div에 애니메이션을 적용합니다. 버튼을 다시 클릭하면 할 수 있습니다.

$('div.outer').animate({height:'100px'},200); 

그리고 너는 다시 100px 높이 만 가질 것입니다.