動きを上げてフェードアウトする

Question

私はdivを上に移動し、特定のリンクのクリックでフェードアウトさせようとしています。私はほとんどそれを達成しましたが、それは突然のようです。 IE：divは動きますが、fadeOutメソッドの継続時間にかかわらず、divがフェードアウトを終了する前に動きを止めます。私の目標は、動きが上がるにつれてフェードアウトさせることです。動きの上部に到達することは決してありません。そのため、ブラッシングしてフェードアウトしているように見えます。

ここでは、コードです：

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