CSS 전환 가능 조절 높이

이 How can I transition height: 0; to height: auto; using CSS?을 발견했습니다.이 방법을 사용하여 button onclick의 div 높이를 변경하려고했지만 어떤 이유로 그것이 저를 위해 작동하지 않습니다. 불필요한 정보가 많이 있으면 죄송합니다.CSS 전환 가능 조절 높이

jQuery를

function playSound(soundfile){ 
     document.getElementById("dummy").innerHTML = 
     "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"; 
} 

    $('button').bind('click', function(e) { 
     e.preventDefault(); 

    $('.taller').toggleClass('animated'); 
    });

HTML

<div id="container"> 
    <span id="dummy"></span> 
    <button onclick="playSound('sound/button-30.wav','sound/button30.mp3');">PlaySound</button>       
    <div class="taller">I SHOULD BECOME TALLER</div> 
    </div>

CSS

#container{ 
background-color:lightblue; 
width:960px; 
height:550px; 
} 

.taller{ 
overflow:hidden; 
background:#000; 
color:#fff; 
width:80px; 
max-height:15px; 
-webkit-transition: max-height .5s linear; 
-moz-transition: max-height .5s linear; 
transition: max-height .5s linear; 
} 

.animated{ 
max-height:100px; 
}

출처

2012-09-18 ocat

나는 jsfiddle로 코드를 삽입하고 테스트했습니다. 잘 작동합니다. 나는 아무 것도하지 않았다. 코드 작동을 여기서 볼 수 있습니다 http://jsfiddle.net/WY7gM/

출처

2012-09-18 03:54:56 scottmgerstl

네, 그게 내가 원하는 것입니다.하지만 Aptana Studio 나 내 브라우저에서 작동하지 않는 이유가 있습니다. – ocat

이것이 일어날 수있는 이유를 알고 있습니까? 그것은 jsfiddle에서 잘 작동합니다. – ocat

디버거를 firefox 또는 chrome으로 열면 콘솔에서 스크립트의 다른 부분에서 오류가 발생했는지 확인하십시오. 코드가 훌륭하게 작동 할 수 있지만 오류로 인해 코드를 작성할 수는 없습니다. – scottmgerstl

이게 당신이 찾고 있는게 뭡니까?

Live Demo

높이보다는 최대 높이로 변경하고 그것을 잘 작동했다. 토글하면 확대/축소됩니다. 당신의 질문은 약간 모호합니다. 그래서 이것이 당신의 후일인지 확실하지 않습니다. 또한 단지 클릭 바인딩 내부에 playsound 기능을 넣는 것이 아닌가요?

출처

2012-09-18 03:56:40 Loktar

playsound 기능에 대한 권리가 있습니다. 내 질문은 Aptana에서 소스 파일을 열 때 내 브라우저에서 작동하지 않는 이유에 관한 것입니다. – ocat

CSS 전환 가능 조절 높이

답변

관련 문제