Question

我正在使用Javascript来扩展div，但是当内容扩展时，它会非常突然，并且最多是非常不具有吸引力。我想知道是否有办法让这个div扩展得更慢，更多的是视觉扩展然后是BLAM。现在我已经完成了。

<script language="javascript"> 
function toggle_profile() {
    var ele = document.getElementById("toggleProfile");
    var text = document.getElementById("displayProfile");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "View Profile";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Profile";
    }
} 
                        </script>

                      <a id="displayProfile" href="javascript:toggle_profile();">View Profile</a></p>
                      <br />
                  <div id="toggleProfile" style="display: none">

Answer 1

诀窍是在Javascript中附加和删除类...并附加这样的CSS3转换：

div {
    -webkit-transition: height .25s ease;
       -moz-transition: height .25s ease;
            transition: height .25s ease;
}

这适用于您可以控制所有div的速度的转换。当然，您可以选择将哪些DOM元素应用于自己。

然后我使用的两个jquery函数是

$("#object").addClass("removeThis"); //hide
$("#object").removeClass("removeThis"); //show

但正如所指出的，你可能不会使用jQuery！所以这里！

document.getElementById("object").className = "";
document.getElementById("object").className = "removeThis";

“#object”是您要定位的对象，而“.removeThis”是您要添加的类，并从dom标记中的class属性中删除。下面是css中的样子。

#object {
    height: 200px;
    /* ignoring other CSS */
}

.removeThis {
    height: 0;
}

假设您希望它上下滑动。另一个技巧是使用不透明度，或display：none和display：block。但是玩吧。我希望这有帮助！

自2012年起编辑：由于您正在使用JavaScript，因此您要求在主线程上完成工作，您可以通过动画转换来利用合成器线程。那就是你可以弄清楚如何摆脱高度风格属性的动画。

Answer 2

重新发明轮子真的没有意义。你可以使用Jquery的slidetoggle轻松完成这项工作。这是页面：http://api.jquery.com/slideToggle/

Answer 3

我认为最好的诀窍是在分区中使用CSS overflow:hidden属性。这将隐藏超出div高度或宽度的内容。然后，您可以通过平滑的CSS过渡轻松增加和减少除法的高度。

您可以阅读the tutorial here

使Div平滑扩展

3 个答案: