文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery在不损失容器空间的情况下逐渐淡出

问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

css

materialize

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-01-24 09:00:23

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

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

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

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

jsfiddle

票数 2

Stack Overflow用户

发布于 2017-01-24 09:03:48

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41818275

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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