0

我发现了这个How can I transition height: 0; 到高度：自动；使用 CSS？我一直在尝试使用这种方法来更改按钮 onclick 上 div 的高度，但由于某种原因，它对我不起作用。抱歉，如果有很多不必要的信息。

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;
}
4

2 回答 2

0

这是你要找的吗？

现场演示

将其更改为高度而不是最大高度，并且效果很好。在切换时它会增长/缩小。你的问题有点含糊，所以我不确定这是否是你想要的。另外，为什么不把播放声音功能放在点击绑定中呢？

于 2012-09-18T03:56:40.713 回答
0

我将您的代码放入 jsfiddle 并对其进行了测试。它工作得很好；我没有对它做任何事情。您可以在此处查看您的代码http://jsfiddle.net/WY7gM/

于 2012-09-18T03:54:56.097 回答