使用jquery/javascript移动隐藏菜单栏

我不知道为什么下面的方法不起作用。我检查了，它成功地更改了类名，但当我单击选项卡时，它没有移动

var main=function() {
    $('.uptab').click(function() {
        $('.headbar').animate({
            top: '10px'
        }, 600);
        $('.tab').animate({
            top: '45px'
        }, 600);
        $('.tab').removeClass('uptab');
        $('.tab').addClass('downtab');
    });
    $('.downtab').click(function() {
        $('.headbar').animate({
            top: '-40px'
        }, 600);
        $('.tab').animate({
            top: '-5px'
        }, 600);
        $('.tab').removeClass('downtab');
        $('.tab').addClass('uptab');
    });
};


$(document).ready(main)

---

你能粘贴你的HTML或者创建一个活的例子会很好（plunker/JSFIDLE）。仅供参考，你应该链接你的jQuery。