3

次のコードがあります。

left = $('.academy-container').css('marginLeft');
function loop_forward(){
    $('.academy-container').stop().animate(
      {
        marginLeft:'-=20'
      }, 
      { 
        duration: 100, 
        step: function(now, fx) { 
          left = fx.pos; 
        }
      },
      loop_forward
      );
  }

  $('.carousel-next').hover(function() {
      loop_forward()
    }, function() {
      stop();
    })
  }

ステップごとに「左」変数を更新することにより、左に移動するときにマージンを追跡するためにステップ関数を使用しようとしています。しかし、思ったようにうまくいきません。アニメーションを続行する代わりに、1 フレーム後に停止します。

変数を更新しながら、アニメーションを継続的にループさせたいと思います。このコードの何が問題なのかを見つけることができないので、助けていただければ幸いです。:)

ありがとう。

編集：私が経験している問題のフィドルは次のとおりです： http://jsfiddle.net/RhQrV/1/

4

2 に答える 2

1

あなたの質問から：しかし、私が思っていたようにはうまくいきません。アニメーションを続行する代わりに、1 フレーム後に停止します。

あなたのコメントから:要素にカーソルを合わせて、動き続けられるようにしたい

アニメーションは正常に機能しており、左の変数は正しく継続的に更新されています。

ただし、アニメーションは、100 ミリ秒の間に残り 20 ピクセルだけ要素を移動するように構成されています。もちろん、それはほとんどすぐに停止します - 言われたとおりに正確に実行しています。

アニメーションを継続的に実行する場合は、アニメーションの完了イベントを使用してそれ自体を呼び出すことができます。ここに jsFiddle があります。アニメーションを終了するために、ここで mouseout 関数を変更しました。

$('.hover').hover(function() {
    loop_forward();
}, function() {
    $('.academy-container').stop(); // Stops the element's animation
});

アニメーションの構成も次のようになります。

{
    easing: 'linear', // Ensure a smooth animation
    step: function (now, fx) {
        left = fx.pos;
        console.log(left);
    },
    complete: loop_forward // Animation now loops itself
}
于 2013-06-17T23:49:02.063 に答える