CODEWITHSUNDEEP
javascriptjquerycss
goregrind
goregrind

Reputation: 49

jQuery and scroll animation conflict

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

Upvotes: 0

Views: 862

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

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

Upvotes: 1

Related Questions