Fade in and out multiple times

Question

This is my code for resizing the window and some other elements and in the scroll function. I have a div that appears and disappears in different position of the screen depending on the x.top of the window.

The problem on the scroll function when I go to hidden_div2 the text inside the <p> fades in. My problem is when you come back to first div the text fades in and out 6 times. HELP :(

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

The scroll event is generated one or more times as the user scrolls. It is NOT only generated once for each overall user scroll. It may be generated many times. Thus, you are seeing more than one scroll event.

If you want to carry out an action AFTER the user appears to be done with a scrolling operation, then you will have to debounce the scroll event so that you only start your operation after a scroll event occurs and no more scroll events occur for some period of time (often 1-2 seconds).

In your code, that debouncing can be done like this:

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

}

If you don't want the debouncing, then perhaps you can just stop the previous animation like this:

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

});