向上滑動元素在不影響dom的情況下使用jQuery淡入淡出

Question

我試圖在淡入時向元素添加向上滑動效果。我將使用CSS3轉換，但我需要支持IE9。

我使用的方法是從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>