我创建了一个简单的 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);
}
);
结果是两个动画同时开始,这不是我想要的。