尝试使用JavaScript动画divs高度

时间:2015-02-16 15:24:47

标签: javascript html animation

我正在尝试设置divs高度的动画,同时设置底部属性。动画有效,但它不会保留在“父”div的底部。

以下是动画的代码:

function mini(elem) {
        var val = 200;
        var elm = document.getElementById(elem.id);

        function frame() {
            val--;

            elm.setAttribute("style", "height:" + val + "px;bottom:0px;");

            if (val == 80) {
                clearInterval(id);
            }
        }

        var id = setInterval(frame, 1);            
    }

您可以在此处查看整个HTML:http://test.lundbeckconsulting.no/ContentBox/default.html

3 个答案:

答案 0 :(得分:0)

您正在使用bottom:0px在元素上设置position:relative。这没什么。


您应该考虑使用jQuery .animate()。您可以执行相同的功能,而无需担心讨厌的计时器间隔等。您的整个代码可以简化为:

$('#container').animate({'height':0},200,'linear');

答案 1 :(得分:0)

我相信你在错误的元素上调用mini()。它应该在container_sub上调用,而不是container

答案 2 :(得分:0)

内部给出的完整示例并没有给出清楚的理解,尽管它是父母,而且是孩子。

有两种简单的方法可以达到你想要的效果:

  1. 向孩子添加margin-top,使其向下移动与高度降低相同
  2. 父元素必须为position: relative,而孩子需要position: absolute才能让底部在此处工作
  3. Sidenote#1:通过使用style属性更改dom元素样式,使代码更具可读性。通过这样做,您不需要在每个动画帧上设置底部样式。

    //From
    elm.setAttribute("style", "height:" + val + "px;bottom:0px;");
    // To
    elm.style.height = val + 'px';
    elm.style.bottom = '0px';
    

    Sidenote#2:阅读有关使用Window.requestAnimationFrame()在javascipt中制作动画的内容。 Sidenote#3:尝试使用转换和转换的组合在css中进行动画,并使用javascript监听动画的结束。