2

jQueryを使ってロゴスライダーを作っています。私の最初のアイデアは、背景として配置されたすべてのロゴで構成される大きな単一の画像を使用し、その位置をアニメーション化することです。この背後にあるアイデアは、単一のファイルのみをロードすることで http リクエストを減らすことでした。

jQuery コードは次のようなものです。

<script>
  $(function(){
    var current = 0;
    function bgscroll(){
      // 20 pixel row at a time
      current -= 20;
      // move the background with backgrond-position css properties
      $('#slider').animate({'background-position' : current+'px'}, 100, 'linear');}
      setInterval(bgscroll, 1);
    });
</script>

ただし、アニメーションには問題があります。ちらつき、滑らかではありません。このアニメーションをよりスムーズにする方法を知っている人はいますか?

現在の CSS

#slider{
  height: 97px;
  overflow: hidden;
  background-image: url("../img/logos-long.jpg");
  background-repeat: repeat-x;
  width: 100%;
}
4

2 に答える 2

2

あなたの例でintervalは、1 つのサイクルが終了する前に複数回トリガーされるanimationため、...

jsBin デモ

setInterval
関数とアニメーション コールバックを使用してループを作成する必要はありません。

$(function(){
  function bgscroll(){
    $('#slider').stop().animate({'background-position':'-=1000'},10000,'linear',bgscroll);
  }
  bgscroll(); // initiate!!
});

を使用してアニメーション キューをクリア.stop()すると、(完全ではありませんが) はるかに改善されます。

于 2012-08-30T22:19:41.607 に答える
1

タイムアウトは、各アニメーション サイクルが終了するよりも速く実行されているようです。タイムアウト遅延を 100ms に増やすと、ちらつきが止まると思います。

于 2012-08-30T22:19:47.497 に答える