Jquery 多次淡入淡出

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

好的，现在滚动功能的问题是，当我转到hidden_div2时，中的文本淡入Ok，我的问题是当你回到第一个div时，文本淡入淡出6次。帮助：(

var image_position=new Array（）；
var i=0；
函数imageResize（）{
$（'.images'）。查找（'img'）。每个（函数（）{
var dwidth=$（window.width（）；
var dheight=$（window.height（）；
var imagewidth=$（this.attr（'width'）；
var imageheight=$（this.attr（'height'）；
var imageratio=图像宽度/图像高度；
var imagehresize=dwidth；
var imagevresize=imagehresize*imageratio；
var x=$（this.parent（'div'）.position（）；
图像_位置[i]=x.top；
var boxleft=dwidth/6；
i++；
});
}
$（窗口）。滚动（函数（）{
var x=$（'.hidden_div'）.offset（）；
var img1=图像位置[2]；
var img2=图像位置[3]；
如果（x.top>img1）{
$（'.hidden_div'）.css（'z-index'，'40'）；
$（'hidden_div p'）。淡出（2000年）；
$（'.hidden_div2'）.css（'z-index'，'130'）；
$（'hidden_div2 p'）fadeIn（2000年）；
}
否则如果（x.top

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

如果要在用户完成滚动操作后执行操作，则必须取消滚动事件的抖动，以便仅在滚动事件发生后开始操作，并且在一段时间内（通常为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);
    }

});

var滚动定时器；
$（窗口）。滚动（函数（）{
//如果我们有一个滚动计时器运行，停止它
如果（滚动计时器）{
clearTimeout（滚动计时器）；
}
//设置一个新的滚动计时器
scrollTimer=setTimeout（函数（）{
scrollTimer=null；
processScroll（）；
}，1000）；//在触发更改之前，请等待1秒无滚动事件
});
函数processScroll（）{
var x=$（'.hidden_div'）.offset（）；
var img1=图像位置[2]；
var img2=图像位置[3]；
如果（x.top>img1）{
$（'.hidden_div'）.css（'z-index'，'40'）；
$（'hidden_div p'）。淡出（2000年）；
$（'.hidden_div2'）.css（'z-index'，'130'）；
$（'hidden_div2 p'）fadeIn（2000年）；
}
否则如果（x.top

如果您不想取消抖动，那么您可以像这样停止上一个动画：

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);
    }

});

$（窗口）。滚动（函数（）{
var x=$（'.hidden_div'）.offset（）；
var img1=图像位置[2]；
var img2=图像位置[3]；
如果（x.top>img1）{
$（'.hidden_div'）.css（'z-index'，'40'）；
$（'.hidden_div p'）。停止（真）。淡出（2000）；
$（'.hidden_div2'）.css（'z-index'，'130'）；
$（'.hidden_div2 p'）.stop（true）.fadeIn（2000）；
}
否则如果（x.top

重拍效果的代码太多了，但这是最重要的部分。事件基本上是滚动的，但它是通过div中的链接锁定的，它会将你带到幻灯片事件。当我返回时，事件只调用一次。有没有办法解决这个问题？@BloodRayneBlood-我添加了一个取消滚动事件的代码示例.yeapz测试了它，同样的事情没有任何变化，当页面关闭时，淡入需要关闭scroling@BloodRayneBlood-您的问题不完全清楚。我以为您是说当用户滚动时滚动事件被调用了6次。这就是我解决的问题。如果正确实施，这将起作用。如果另一个问题，您需要编辑您的问题以使其更清晰。@BloodRayneBlood-什么是“淡入淡出事件”？我从未听说过这样的事情。您的代码正在处理“滚动事件”，它在滚动事件处理程序中进行

fadeIn（）

和

fadeOut（）

函数调用。