Исчезать и исчезать несколько раз

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

});