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/

您可以使用第二个fadein作为第一个完成时的参数

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

在第1个动画结束时运行第2个jquery动画

2 个答案: