第一個動畫結束時運行第二個jQuery動畫

Question

我創建了一個簡單的js橫幅。 首先公司名稱將運行到距離離開中心，然後在圖像標誌褪色

HTML

<div id="banner-container"> 
    <div id="companyname"><p>P.Classique Trading Co. Ltd.</p></div> 
    <div id="logo"><img src="img/twitter_logo.png" width="100" height="100" /></div> 
    </div> 

CSS

#banner-container { 
    position:relative; 
    left:300px; 
    top:100px; 
    overflow: hidden; 
    display:box; 
    background-color: #282800; 
    width:500px; 
    height:300px; 
    color:#FFFFFF; 
} 

#companyname { 
    position: relative; 
    color:yellow; 
    top:15px; 
    left:-500px; 
    font-family: 'Finger Paint', cursive; 
} 
#logo { 
    position: relative; 
    display:none; 
    top:50px; 
    left:200px; 
} 

JS

$(document).ready(function() { 
    var left = $('#companyname').offset().left; 
    $("#companyname").css({left:left}).animate({"left":"120px"}, {duration:1000, easing:'easeOutBounce'}); 

    $("#logo").fadeIn(1500); 

    } 

); 

結果兩個動畫同時開始，這不是我想要的。

Answer 1

Working jsFiddle Demo

使用動畫的回調：

$("#companyname") 
    .css({left:left}) 
    .animate(
     {"left":"120px"}, 
     { 
      duration:1000, 
      easing:'easeOutBounce', 

      complete: function() { 
       $("#logo").fadeIn(1500); 
      } 
     } 
    ); 

Answer 2

試試這個小提琴：http://jsfiddle.net/KhsWt/

可以使用第二淡入作爲參數時，第一個完成

$(document).ready(function() { 
var left = $('#companyname').offset().left; 
$("#companyname").css({left:left}).animate({left:"120px"}, 1000, 'easeOutBounce', 
    function() { 
     $("#logo").fadeIn(1500); 
    } 
)});