jQuery 自定义内容滚动条动画

Question

我正在尝试在使用mCustomScollbar 滚动时制作动画

我能够获取当前的scrollTop 并使用以下代码使其在特定高度上进行动画处理：

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

但如果我尝试使用这段代码使动画倒退：

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

这部分失败了，一旦添加，animate({opacity:0}) 不知何故需要很长时间才能开始动画。

预览：

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

Answer 1

在调用 .animate() 之前尝试停止任何 #topbar 动画：

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

这里有更多关于 jQuery .stop() 的信息： http://api.jquery.com/stop/