Question

对于我正在制作的网站，我有一些动态加载的内容。我想要完成的是，当内容加载时，我希望div能够平滑地动画扩展到新内容的大小，有点像div在this Fiddle或者这样做：

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 51%, black 49%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

<div class="box"></div>

该代码使用CSS转换作为完成幻灯片的hacky方式。

transition: background-position 1s;

相反，我想使用JavaScript，也许使用JQuery，让div本身调整大小以适合我的内容。例如，如果旧内容比新内容长，则div会滑动变小。如果旧内容较小，则div会增长以适应新内容。

目前，div只是跳得更小，因为里面的元素不再需要那么多的空间。有没有办法动画这个内容更改？我尝试过使用CSS过渡但是它太复杂了，无法协调div和内容的大小。

Answer 1

您需要获取容器的原始高度以及更新内容后的新高度

<强> Demo

function changeContent() {
    var oldHeight = div.height();
    texts.push(div.text());
    div.text(texts.shift());
    var newHeight = div.height();
    div.height(oldHeight);
    div.animate({height: newHeight}, 'fast', function() {
        div.height('auto');
    });
}

当隐藏元素时，如何为div的背景设置动画？

1 个答案: