jQuery custom content scroller animate

Question

I'm trying to make an animation while scrolling with mCustomScollbar

I'm able to get the current scrollTop and make it animate on a specific height with the following code:

$("#content").mCustomScrollbar({
    scrollButtons:{
        enable:true
    },
        advanced:{
            updateOnContentResize: true,
            updateOnBrowserResize: true,
    },
    callbacks:{
        onScrollStart:function(){ onScrollStart(); },
        whileScrolling:function(){ WhileScrolling(); } 
    }
});

function WhileScrolling(){
    var top = Math.abs(mcs.top);

    if(top > 180){
        $('#topbar').animate({opacity:'0'});
    }

But if I try to make the animation backwards with this code:

if(top < 180){
    $('#topbar').animate({opacity:'1'});
}

This part fails, and once added, the animate({opacity:0}) somehow takes a long time before it starts the animation.

preview:

http://www.alphadesigns.t15.org/

Answer 1

Try stopping any #topbar animations before calling .animate():

$('#topbar').stop().animate({opacity:'1'});
$('#topbar').stop().animate({opacity:'0'});

more on jQuery .stop() here: http://api.jquery.com/stop/