javascript - jQuery 和滚动动画冲突

Question

当我只滚动一点点时，我的功能可以 100% 工作，但是当我向下滚动所有页面并快速向上滚动时，我的不透明度:0 需要更长的时间或根本不起作用。知道为什么吗？这是因为我多次调用我的功能？

$(window).scroll(function () {
    var TopValue = $(window).scrollTop();
    if (TopValue <= 50) {
        $("div.mouseover > p").css('opacity', 0);
    } else {
        $("div.mouseover > p").animate({
            opacity: '1.0'
        }, 1000);
    }
});

Answer 1

由于您的函数调用发生了多次，您必须在开始另一个动画之前清除动画队列，请阅读.stop()进一步说明。

试试这个，

$(window).scroll(function () {
    var TopValue = $(window).scrollTop();
    if (TopValue <= 50) {
        $("div.mouseover > p").css('opacity', 0);
    } else {
        $("div.mouseover > p").stop().animate({
            opacity: '1.0'
        }, 1000);
    }
});