0

左にスライドしてループする背景画像をアニメーション化するための最良の方法は何ですか？アクティブなときにアニメーション化する背景のあるプログレスバーがあるとします（GnomeやOS Xなど）。

私は$(...).animate()関数を試して、関連するCSSプロパティを変更しようとしていますが、プロパティを変更する方法を理解しようとすると、レンガの壁にぶつかり続けbackground-positionます。その値を増やすことはできず、これが最善のアプローチであるかどうかもわかりません。

助けていただければ幸いです。

4

4 に答える 4

15

これを投稿するとすぐにわかりました。それが他の誰かを助ける場合に備えて、これが私が思いついた関数です：

function animateBar(self) {
    // Setup
    var bar = self.element.find('.ui-progress-bar');

    bar.css('background-position', '0px 0px');

    bar.animate({
        backgroundPosition: '-20px 0px'
    }, 1000, 'linear', function() {
        animateBar(self);
    });
}
于 2008-12-14T21:44:41.083 に答える
3

単なる提案ですが、標準関数を使用して要素を引数として渡すよりも、fn.extend を使用することをお勧めします。

$.fn.extend({
    animateBar: function(){
       $(this).find('.ui-progress-bar').css('background-position', '0px 0px');
       $(this).find('.ui-progress-bar').animate({
            backgroundPosition: '-20px 0px'
       }, 1000, 'linear', function() {
            animateBar(self);
       });
    }
});

次に、次のように関数を呼び出します。

$(this).animateBar();

対 

 animateBar( $(this) );

ちょうど私の2セント。ただし、jQuery でアニメーション化された画像を使用する特別な理由がない限り、@Markus の Gif ソリューションは間違いなく優れています。また、ソリューションは単独ではループしません。

于 2011-05-25T00:42:59.763 に答える
1

あなたの場合（プログレスバーをアニメーション化する）のより良い解決策は、アニメーション化された.gifをプログレスバーの背景画像として使用することだと思います。

また、静的な進行状況バーからアニメーション化された進行状況バーに切り替えるには、次のようなものを使用します:

$("#progress").css("background-image", "progress.gif");
于 2011-01-16T23:22:08.663 に答える
0

Spritelyプラグインを使用できます 。スライドする背景をアニメーション化して繰り返す場合は、pan() メソッドを使用して、背景画像を継続的に左または右にパンしてから繰り返すことができます。

于 2011-07-26T10:28:16.600 に答える