jquery动画是非常buggy

Question

我正在使用JQuery动画来滚动100或更多像素时向下动画图像。然后，当我滚回顶部时，它需要恢复到原始状态。而不是在回来的路上，它会一遍又一遍地往上走，直到最后停下来。

我该如何解决这个问题？

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    if ($(this).scrollTop() >= 100) { 
 
     //alert('scrolled'); 
 
     $('.flipje_pas_image').animate({ 
 
     top: -50 
 
     }, 1000); 
 
    } 
 
    if ($(this).scrollTop() < 100) { 
 
     $('.flipje_pas_image').animate({ 
 
     top: -450 
 
     }, 1000); 
 
    } 
 
    }); 
 
});

Answer 1

您需要使用翻转时，如果条件满足，使动画发生一次，而eavery滚动事件

这样

AA布尔状态$（document）.ready（function（）{ var once = false; $（window）.scroll（function（）{

if ($(this).scrollTop() >= 100) { 
    //alert('scrolled'); 
    if(!once){ 
    once = true 
     console.log('ssd' , once) 

     $('.flipje_pas_imag').animate({ 
     top: -50 
    }, 1000); 
    } 

} 
if ($(this).scrollTop() < 100) { 
    if(once){ 
    once = false; 

    $('.flipje_pas_imag').animate({ 
    top: -450 
    }, 1000); 
    } 

} 

}）; }）;