使用jQuery向上滑动元素淡入而不影响dom

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

＆＃13;

＆＃13;

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

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;