jQuery Animation not working right

jQuery Animation not working right

I am new to javascript and jQuery but I am trying to do some cool
animations on my website and the code is probably a bit long to post here.
I am building a cool new student portfolio page for myself and am having
an issue with jQuery animations I believe.
My Website is http://timherbert.net
My problem is that if you click on development then try to click on the
design button that appears in the nav, the animation won't work. The other
side works perfectly well clicking on design and then development brings
me back to the other side. I've struggled to figure out this bug and why
it won't work and am baffled.
As I said I am new to this kind of thing so please be gentle. But things I
am doing wrong and need to correct and other critiques would be greatly
appreciated.
All of my scripts are linked at the bottom of the page and main.js is my
main javascript file. I'll post a couple of my functions here and maybe
someone will spot a problem there. I apologize for the crazy indentation
in the code as struggled posting it here.
function rightButton(){
$('.theatre').empty();
$('#content').slideUp();
$('#content-wrapper').toggleClass('overflow');
$('#content-wrapper').removeAttr('style', "");
$("#rightRect").removeClass('cursor');
$("#rightRect").addClass('zz');
$("#rightRect").animate({right:'87%'});
$(content2).appendTo('.theatre');
$('#leftRect').animate({right:'87%'});
$('#social-icons').css({'right': 20 + 'px'});
$('#design-more').animate({right:'-597%'});
$('#design-more').slideDown();
setTimeout(function() { var h = $('.theatre').height();
var hh =
$('#hodgepodge').height();
$('#rightRect').css({'height': h + 'px'});
$('#hodge').css({'height': hh - 20 + 'px'});
$('#rnav').slideDown();
$('#tooltip').tooltip();
$('.tooltip1').tooltip();
$('.tooltip2').tooltip();
$('.tooltip3').tooltip();
}
function leftButton(){
setTimeout(function() {
$('.theatre').empty();
$(content1).appendTo('.theatre');
$('#social-icons').css({'right': 220 + 'px'});
$('#tooltip').tooltip();
$('.tooltip1').tooltip();
$('.tooltip2').tooltip();
$('.tooltip3').tooltip();
}, 20);
$("#leftRect").addClass('yy');
$("#leftRect").animate({left:'86%'});
$('#lnav').fadeIn();
$('#lnav').fadeTo('0.2');
$('#content').slideUp()
$('#rightRect').animate({left:'87%'});
$("#leftRect").addClass('yy');
}