平滑移動和淡出

Question

我試圖讓div向上移動，並在點擊特定鏈接時淡出。我已經完成了它，但它似乎有點突然。 IE：div向上移動，但在div完成淡出之前停止向上移動，無論fadeOut方法的持續時間如何。我的目標是在它向上移動時淡出，這樣你就永遠不會看到它移動到頂端，所以它看起來正在被刷掉和消失。

下面的代碼：

$(document).ready(function() { 
 

 
    $("#bannerText").fadeIn(2000); 
 
    
 
    $(".showSites").click(function() { 
 

 
     $('#bannerText').animate({ 
 
     'marginTop': "-=750px"}).fadeOut(0); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="bannerText"> 
 
     <h1>Welcome</h1> 
 
     <div class="subText"> 
 
      <span>There will be more here soon, I promise. For now, <a href="#" class="showSites">see what I've done so far.</a></span> 
 
     </div> 
 
     </div>

我可以發佈它生活會有所幫助，因爲DIV在屏幕的正中，所以片段並沒有做太多好。

如果有任何問題，我可以做些什麼來消除這種情況？

編輯：here it is live，以更好地瞭解它的外觀。

Answer 1

你需要動畫的CSS opacity : 0和.animate()回調函數

$('#bannerText').animate({'opacity':0,'marginTop': "-=750px"} , 5000 , function(){ 
    $(this).fadeOut(0); 
}); 

$(document).ready(function() { 
 
    $("#bannerText").fadeIn(2000); 
 
    $(".showSites").click(function() { 
 
    $('#bannerText').animate({'opacity' : 0 , 'marginTop': "-=750px"} , 7000 , function(){ 
 
     $(this).fadeOut(0); 
 
    }); 
 
    }); 
 
});

#bannerText{ 
 
    margin-top: 100px; 
 
    display : block; 
 
    opacity : 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="bannerText"> 
 
     <h1>Welcome</h1> 
 
     <div class="subText"> 
 
      <span>There will be more here soon, I promise. For now, <a href="#" class="showSites">see what I've done so far.</a></span> 
 
     </div> 
 
     </div>