CSS transitions可調高度

我發現這個How can I transition height: 0; to height: auto; using CSS?，我一直在試圖用這種方法來改變按鈕onclick上的div的高度，但由於某種原因，它不適合我。很抱歉，如果有很多不必要的信息。CSS transitions可調高度

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

改成了高度，而不是最大高度和它工作得很好。在切換時它會增長/縮小。你的問題有點含糊，但我不確定這是否是你之後的事情。此外，爲什麼不只是在點擊綁定裏放置播放功能呢？

來源

2012-09-18 03:56:40 Loktar

您有關播放功能的權利。我想我的問題是關於爲什麼當我從Aptana打開源文件時，它不能在我的瀏覽器中工作。 – ocat

CSS transitions可調高度

回答

相關問題