使Div平滑扩展

时间:2012-10-26 20:41:30

标签: javascript

我正在使用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">

3 个答案:

答案 0 :(得分:17)

诀窍是在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,因此您要求在主线程上完成工作,您可以通过动画转换来利用合成器线程。那就是你可以弄清楚如何摆脱高度风格属性的动画。

答案 1 :(得分:3)

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

答案 2 :(得分:0)

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

您可以阅读the tutorial here