jQuery and scroll animation conflict

Question

My function works 100% when i only scroll a little bit, but when i scroll all the page down and scroll up fast, my opacity:0 take longer or doesn't work at all. Have any idea why ? It is because my function i call to many times ?

$(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

Since your function call is happening multiple times, You have to clear the animation queue before starting another animation , Please read .stop() for further clarifications.

Try this,

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