Question

我有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

Answer 1

您可以使用transform: translate()代替margin并切换height。您还可以通过在JS中应用类来为CSS中的所有内容设置动画。

＆＃13;

    $("#card1")
        .addClass('ready');

＆＃13;

#card1 {
  transition: opacity 2.5s, transform 2.5s;
}
.ready {
  opacity: 0;
  transform: translateY(100%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

jsfiddle

Answer 2

它隐藏了，因为动画完成后会添加display: none样式。我通常不喜欢使用!important，但添加了一些简单的样式来修复它：

https://jsfiddle.net/00wswmqb/1/

jQuery在不丢失容器空间的情况下淡化

2 个答案: