Question

Hy everione这是我调整窗口和其他一些元素的代码，在滚动功能中我有一个div，它根据窗口的x.top在屏幕的不同位置上显示和消失。

好了现在滚动功能上的问题当我去hidden_div2时，

中的文字消失了我的问题是当你回到第一个div文本淡入淡出6次。帮助:(

var image_position = new Array();
var i = 0;

function imageResize() {
    $('.images').find('img').each( function (){
        var dwidth = $(window).width();
        var dheight = $(window).height();

        var imagewidth = $(this).attr('width');
        var imageheight = $(this).attr('height');
        var imageratio = imagewidth / imageheight;

        var imagehresize = dwidth;
        var imagevresize = imagehresize * imageratio;

        var x = $(this).parent('div').position();
        image_position[i] = x.top;

        var boxleft = dwidth / 6;

        i++;
    });

}

$(window).scroll(function(){
    var x = $('.hidden_div').offset();
    var img1 = image_position[2];
    var img2 = image_position[3];

    if(x.top > img1){
        $('.hidden_div').css('z-index', '40');
        $('.hidden_div p').fadeOut(2000);
        $('.hidden_div2').css('z-index', '130');
        $('.hidden_div2 p').fadeIn(2000);

    }
    else if(x.top < img1){
        $('.hidden_div').css('z-index', '130');
        $('.hidden_div p').fadeIn(2000);
        $('.hidden_div2').css('z-index', '40');
        $('.hidden_div2 p').fadeOut(2000);
    }

});

Answer 1

当用户滚动时，滚动事件会生成一次或多次。它不仅为每个整体用户滚动生成一次。它可能会多次生成。因此，您将看到多个滚动事件。

如果要在用户看似完成滚动操作后执行操作，则必须去抖动滚动事件，以便只在滚动事件发生后才开始操作，不再发生滚动事件一段时间（通常1-2秒）。

在您的代码中，可以像这样进行去抖动：

var scrollTimer;
$(window).scroll(function() {
    // if we had a scrollTimer running, stop it
    if (scrollTimer) {
        clearTimeout(scrollTimer);
    }
    // set a new scrollTimer
    scrollTimer = setTimeout(function() {
        scrollTimer = null;
        processScroll();
    }, 1000);   // wait for 1 second of no-scroll events before firing our changes
});

function processScroll() {
    var x = $('.hidden_div').offset();
    var img1 = image_position[2];
    var img2 = image_position[3];

    if(x.top > img1){
        $('.hidden_div').css('z-index', '40');
        $('.hidden_div p').fadeOut(2000);
        $('.hidden_div2').css('z-index', '130');
        $('.hidden_div2 p').fadeIn(2000);

    }
    else if(x.top < img1){
        $('.hidden_div').css('z-index', '130');
        $('.hidden_div p').fadeIn(2000);
        $('.hidden_div2').css('z-index', '40');
        $('.hidden_div2 p').fadeOut(2000);
    }

}

如果你不想要去抖动，那么也许你可以像这样停止上一个动画：

$(window).scroll(function(){
    var x = $('.hidden_div').offset();
    var img1 = image_position[2];
    var img2 = image_position[3];

    if(x.top > img1){
        $('.hidden_div').css('z-index', '40');
        $('.hidden_div p').stop(true).fadeOut(2000);
        $('.hidden_div2').css('z-index', '130');
        $('.hidden_div2 p').stop(true).fadeIn(2000);

    }
    else if(x.top < img1){
        $('.hidden_div').css('z-index', '130');
        $('.hidden_div p').stop(true).fadeIn(2000);
        $('.hidden_div2').css('z-index', '40');
        $('.hidden_div2 p').stop(true).fadeOut(2000);
    }

});

多次淡入淡出

1 个答案: