在滚动到站点时添加移动效果

Question

我已在我的网站 simmona.uchenici.bg/test/ 中尝试过此代码 结果是效果不会停止。当部分标题位于窗口底部且只有图像部分时，我希望滚动效果停止 在他们赶上时继续。另外我不知道为什么我的图片在滚动时会放大...如何调试？

$(document).ready(function(){
$(document).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /680 > 0) {
  $('#textbox').animate({
    'marginTop' : "+=50px" 
  });
}
else {
  $('#textbox').animate({
    'marginTop' : "-=10px" 
  });
}

});

$(document).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /680 > 0) {
  $('#image').animate({
    'marginTop' : "+=50px" 
  });
}
else {
  $('#image').animate({
    'marginTop' : "-=5px" 
  });
}`}); 

});`

Answer 1

您无需对动画进行排队。现在发生的事情是您向上、向下、向上向下滚动……但动画不会停止，而您已经通过滚动发出新命令。为了解决这个问题，请检查 .stop documentation 以供进一步使用。

$(document).ready(function(){

    $(document).bind('mousewheel', function(e){

        if(e.originalEvent.wheelDelta / 680 > 0) {
            $('#textbox').stop(true, false).animate({ /* 1) applied stop(true, false)*/
              'marginTop' : "+=50px" 
            }, 1000, function(){});
        }else {
            $('#textbox').stop(true, false).animate({ /* 2) applied stop(true, false)*/
              'marginTop' : "-=50px" 
            }, 1000, function(){}); 
        }

    });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="textbox"> SOME TEXT</p>