jquery - 停止 .animate 重新计算 .scroll 位置

Question

如果您在传递 div id "one" 时查看此jsfiddle，然后在它移动完整 190px 之前再次滚动，则动画将在您滚动时停止。我希望动画继续移动到 190 像素，即使你再次滚动，当它返回 -100 像素时也是如此。

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);
}
})

Answer 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;
                              }
                             );
    }
});​

Answer 2

我可能不理解您正在寻找的功能，但如果您希望动画完成而不管用户向上滚动的事实，您可以.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);
  }

})