0

div id "one"を渡したときにこのjsfiddleを見て、190px全体を移動する前にもう一度スクロールすると、スクロール中にアニメーションが停止します。もう一度スクロールしてもアニメーションが190pxに移動し続け、-100pxに戻ったときも同じようにしたいと思います。

var $test = $(".test2");
$(window).scroll(function () {
if ($(this).scrollTop() > $('#one').position().top) {
$test.stop().animate({left: "190px"}, 1000);
} else {
$test.stop().animate({left: "-100px"}, 1000);
}
})
4

2 に答える 2

1

アニメーションが実行されていることを示す変数が必要であり、アニメーションが完了したらリセットする必要があると思います。

var $test2 = $(".test2");
var running = false;
$(window).scroll(function () {
    if (running)
        return;
    if ($(this).scrollTop() > 100) {
        running = true;
        $test2.stop().animate({left: "200px"}, 
                              300,
                              function() {
                                  running = false;
                              }
                             );
    } else {
        running = true;
        $test2.stop().animate({left: "-90px"},
                              300,
                              function() {
                                  running = false;
                              }
                             );
    }
});​
于 2013-01-02T19:20:41.583 に答える
0

探している機能がわからない場合もありますが、ユーザーが上にスクロールしたにもかかわらずアニメーションを完成させたい場合は.stop()、イベント関数からを削除するだけです。

フィドル

JS

var $test = $(".test2");

$(window).scroll(function () {
  if ($(this).scrollTop() > $('#one').position().top) {
    $test.animate({left: "190px"}, 1000);

  } else {
    $test.animate({left: "-100px"}, 1000);
  }

})
于 2013-01-02T19:06:40.557 に答える