问jQuery在不损失容器空间的情况下逐渐淡出
EN

Stack Overflow用户

提问于 2017-01-24 08:52:43

回答 2查看 79关注 0票数 2

我有3个cards水平排列，并同时向下滑动和褪色。我下一步要做的是在动画之后保留页面上的空间。我知道css('visibility','hidden')不会从文档中删除该元素，但如果我在动画之后应用此属性，则为时已晚。

我尝试保存card的原始宽度和高度，并在动画之后使用.css()重新应用它们，但这不起作用。

HTML

<div class="row center">
                    <div  id="card1" class="col s4">
                        <div  class="card blue-grey lighten-2">
                            <div class="card-content white-text center">
                                <span class="card-title">Card 1</span>

                            </div>
                        </div>
                    </div>
                    <div class="col s4">
                        <div class="card blue-grey lighten-2">
                            <div class="card-content white-text center">
                                <span class="card-title">Card 2</span>

                            </div>
                        </div>
                    </div>
                    <div class="col s4">
                        <div  class="card blue-grey lighten-2">
                            <div class="card-content white-text center">
                                <span class="card-title">Card 3</span>

                            </div>
                        </div>
                    </div>
                </div>

jQuery

$("#card1")
    .css('opacity', 1)
    .css('visibility','hidden')
    .animate({
        opacity: 0,
        marginTop: $("#card1").height(),
        height: "toggle",
    }, 2500, function () {
        //when animation is done
    });

jsfiddle

jquery