How can i add fixed nav bar switching animation

Question

I have created two navigation one at top other at page center. Code is working fine but i want add some some animation effects while nav switching i have tried adding slideDown/Up but they didn't made them much interactive like i want. Please help me how can i add a animation effect?

fiddle

$(document).ready(function(){
    $(window).scroll(function() {
        if($(window).scrollTop()>2000){
            $("#nav02").css("position", "fixed");
            $("#nav02").css("top", 0);
            $("#nav01").hide();
        } else {
            $("#nav02").css("position", "relative");
            $("#nav01").show();
        }
    });
});

Answer 1

You can use this one may be it will work.

$(document).ready(function(){
        $(window).scroll(function() {
            if($(window).scrollTop()>2000){
                $("#nav02").css("position", "fixed");
                $("#nav02").css("top", 0);
                $("#nav01").slideDown();
            } else {
                $("#nav02").css("position", "relative");
                $("#nav01").slideUp();
            }
        });
    });