停止。动画重新计算。滚动位置

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

我可能不明白，你正在寻找的功能，但如果你想不顾事实，即用户已经向上滚动的动画来完成，你可以从你的事件函数删除.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); 
    } 

}) 

Answer 2

我认为你需要有一个变量，表示在动画运行，然后重置它时，动画完成：

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