3

CSSスプライトを使用してアニメーションを作成しようとしています（私のアプローチが正しいかどうか教えてください）。次のjqueryコードを確認してください...

$(document).ready(function() {
    setTimeout("boat()",20);
});
function boat(){
    $("#boat").animate({right:"+=110%"},20000).css("background-position","0 0").animate({left:"+=110%"},20000).css("background-position","0 -68px")
    setTimeout("boat()",20000);
}

CSS: 

#boat {
    margin-top:160px;
    position:absolute;
    margin-left:100%;
    width:150px;
    height:68px;
    background-image:url(plane.png);
    background-repeat:no-repeat;
}

アニメーションは完璧に機能します (右から左、左から右) が、CSS スプライトが期待どおりに機能しないという小さな問題があります。このプロパティのみを取得します.css("background-position","0 -68px")

4

2 に答える 2

1

すべてを1つに適用するためです。.css（ "background-position"、 "0 0"）および.css（ "background-position"、 "0 -68px"）何を達成したいですか？アニメーションが終わったときのコールバックではないですか？

これを試して：

 $(document).ready(function() {
    boat();
});
function boat(){
    $("#boat").css("background-position","0px 0px").animate({right:"+=110%"},10000, function() {
        $("#boat").css("background-position","0px -68px").animate({right:"-=110%"},10000, boat);
    });
}

ここで確認できます：http：//jsfiddle.net/7GV9G/20/

これは継続的になります。右から左へ、左から右へ、もう一度、永遠にループします。一度だけ必要ない場合は、2番目のアニメーションからボートのコールバックを削除します。

于 2012-04-17T10:40:01.613 に答える
1

あなたが私の答えを投稿するために上記のようにこんにちは:)これを参照してください: http://jsfiddle.net/UzLxZ/9/show/ && ここにコード: http://jsfiddle.net/UzLxZ/9/ &&そして私の以前のスタートアップはこれでした：http://jsfiddle.net/5dqwP/1/

あなたが正確に必要とするこの別のバージョンhttp://jsfiddle.net/UzLxZ/20/show/（青いボックスが画面から出て戻ってくるのを待ってください）または http://jsfiddle.net/UzLxZ/21/show/ && http://jsfiddle.net/UzLxZ/20のコードはこちら; 遊んできれいにすることができます。:)

さらに編集

http://jsfiddle.net/8sVDE/ - これにより、より多くのアイデアが得られるかもしれません。

** http://archive.plugins.jquery.com/project/Pause-Resume-animation または ** JQuery でマウスオーバーおよびマウスアウト中にアニメーションを停止して続行する方法

あなたが探しているものを正確に理解しています。

これが役に立てば幸いです: (マウスを青いボックスの上に置くと、完全な繰り返しが 1 回表示されます)

したがって、このjsfiddleは、あなたが望むものを正確に示しています。つまり、「一時停止してマウスオーバーで再開し、1回の実行が成功した後に停止したい（右から左、左から右に完全な機能を完了することを意味します）」

これが役立つかどうか教えてください。

Jクエリコード

$(document).ready(function() {
    boat();
});
function boat(){
    $("#boat").css("background-position","0px 0px").animate({right:"+=100%"},1000, function() {
        $("#boat").css("background-position","0px -68px").animate({right:"-=100%"},1000).stop();
    });
   // alert('foo');
}



$("#boat").mouseover(function(){
   boat(); 

});
​
于 2012-04-17T20:46:36.770 に答える