Question

如果您在传递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);
}
})

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()即可。

Fiddle

<强> JS

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

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

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

})

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

2 个答案: