左側のスライドの背景画像をアニメーション化する最も簡単な方法はありますか？

StackOverflow https://stackoverflow.com/questions/367020

質問

背景画像左にスライドし、それをループをアニメーション化する最良の方法は何ですか？私はそれが（GNOMEやOS Xのように）アクティブなときアニメーション化する背景とプログレスバーを持っていると言っています。

私は$(...).animate()機能で遊んで、関連するCSSプロパティを変更しようとしているが、私はbackground-positionプロパティを変更する方法を理解しようとすると、レンガの壁に当たって維持してきました。これはでも最善のアプローチであれば、私はちょうどその値をインクリメントすることはできません、と私はよく分からない。

すべてのヘルプは感謝！

役に立ちましたか？

解決

とすぐに私はそれを考え出したの投稿として。

：ケースでは、ここで私が思いついた機能だ、誰に役立ちます 
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);
    });
}

他のヒント

だけの提案ではなく、標準機能を使用して、引数として要素を渡すよりも、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セント。しかし@MarkusさんのGIFソリューションあなたはjQueryのでアニメーション画像を使用する特別な理由がない限り、間違いなく優れています。また、あなたのソリューションは、独自のないループされます。

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

また、ちょうどのようなものを使用して、アニメーションの1に静的プログレスバーから切り替えるには 

$("#progress").css("background-image", "progress.gif");

あなたは Spritely のプラグインを使用して、スライドの背景をアニメーション化し、それを繰り返すあなたのケースのためにすることができます、あなたは左または右に継続的に背景画像パンを行い、その後、繰り返しパン（）メソッドを使用することができます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top