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以便进一步使用。

＆＃13;

$(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(){}); 
        }

    });
  
});

＆＃13;

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

＆＃13;

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

1 个答案: