jquery - 在不影响 dom 的情况下使用 jQuery 向上滑动元素淡入淡出

Question

我正在尝试在元素淡入时向其添加向上滑动效果。我会使用 CSS3 过渡，但我需要支持 IE9。

我使用的方法是在元素淡入时将 margin-top 从 20px 设置为 0px 的动画。

我的问题是，这显然会影响 DOM 中元素下方的内容。有没有办法做到这一点，以便元素下面的内容不受影响？

$(".button").click(function(){
    $(".fade-in-block").css({opacity : 0, marginTop : "20px"})
                    .delay(100)
                    .animate({
                        marginTop : "0px", 
                        opacity : 1
                    }, 500, 'linear');
  });

jsFiddle

Answer 1

您可以将 div 的位置更改为相对位置，然后为 top 而不是 margin-top 设置动画。

jsfiddle

$(document).ready(function(){
    $(".button").click(function(){
        $(".fade-in-block") .css({opacity : 0, top : "50px" })
        .delay(100)
        .animate({
            top : "0px",
            opacity : 1
        },  500, 'linear');
      });

});

.button {
    width: 100px;
    padding: 20px 25px;
    background: blue;
    color: white;
    text-align: center;
    margin: 20px;
    cursor: pointer;
}

.fade-in-block {
    min-height: 200px;
    background: pink;
    position: relative;
}

.not-fade-in-block {
    min-height: 500px;
    margin: 40px 0 0 0;
    background: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">click me</div>
<div class="fade-in-block">
    <div class="block"></div>
    <div class="block"></div>
</div>

<div class="not-fade-in-block"></div>
<div class="block"></div>
<div class="block"></div>