-1

シンプルな 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);

    }

  );

その結果、2 つのアニメーションが同時に開始されますが、これは望ましくありません。

4

2 に答える 2

3

動作中のjsFiddleデモ

アニメーションにコールバックを使用します。

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

            complete: function () {
                $("#logo").fadeIn(1500);
            }
        }
    );
于 2013-05-28T08:14:35.727 に答える
0

このフィドルを試してください: http://jsfiddle.net/KhsWt/

最初のフェードインが終了したときのパラメータとして 2 番目のフェードインを使用できます

$(document).ready(function() {
var left = $('#companyname').offset().left;
$("#companyname").css({left:left}).animate({left:"120px"}, 1000, 'easeOutBounce',
   function() {
        $("#logo").fadeIn(1500);
    }
)});
于 2013-05-28T08:23:21.243 に答える