Eine Bewegung nach oben glätten und fadeOut

Question

Ich versuche, eine div nach oben zu bewegen und auf Klick auf einen bestimmten Link auszublenden. Ich habe es größtenteils geschafft, aber es scheint irgendwie abrupt zu sein. IE: Die div bewegt sich nach oben, aber es hört auf sich zu bewegen, bevor die div aufhört auszublenden, unabhängig von der Dauer der fadeOut Methode. Mein Ziel ist es, es auszublenden, während es sich nach oben bewegt, so dass Sie es nie an die Spitze seiner Bewegung kommen sehen, so dass es aussieht, als würde es weggebürstet und ausgeblendet.

Hier ist der Code:

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

Ich kann es, es würde helfen veröffentlichen leben, weil die div in der Mitte des Bildschirms zentriert ist, so dass die Schnipsel viel nicht tun gut.

Was kann ich tun, wenn überhaupt, um dies auszugleichen?

Edit: here it is live, um eine bessere Vorstellung davon zu bekommen, wie es aussieht.

Answer 1

Sie benötigen CSS opacity : 0 und .animate() Callback-Funktion, bis die

$('#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>