第一个动画结束时运行第二个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); 
    } 
)});