0

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