Major code bloat reduction with jQuery

Basically I want some help in reducing the bloat of this code. I am new to JavaScript so this represents an attempt at learning jQuery by doing. All of this code works as I want it to, but it is not efficient or maintainable long term.

I realize there is no context for what is going on, but I figure that someone could immediately see places to create reusable chunks of code at a glance. If someone is willing to help me reduce the length and improve the quality dramatically I would be happy to provide a link to the website that utilizes it. Foregoing that I am mostly looking for someone to provide insight and point me in the right direction.

```
jQuery(document).ready(function($){

/RIGHT ANIMATIONS/
$("body").on('click', '.right-tog', function(event) {
$('.right').animate({right: 0}),
$('#content').animate({right: 300}),
$('header nav, header div, .right-tog, .bkgd-desc').fadeOut(300);
});

$("body").on('click', '#content, .click-thru, a[role=close]', function(event) {
var divpos = parseInt($('.right').css('right'));

if (divpos == 0) {
$('.right').animate({right: '-100%'}),
$('#content').animate({right: 0}),
$('header nav, header div, .right-tog, .bkgd-desc').fadeIn(300);
};
});

/LINKS ANIMATIONS/
$("body").on('click', '.events', function(event) {
$('#events').animate({top: 0}),
$('#content').animate({top: 100}),
$('header nav, #right-tog, .bkgd-desc').fadeOut(300);

var rightpos = parseInt($('.right').css('right'));

if (rightpos == 0) {
$('.right').animate({right: -600}),
$('#content').animate({right: 0}),
$('#main-menu, #right-tog, .bkgd-desc').fadeIn(300);
};
});

$("body").on('click', '.links, .links-thru', function(event) {
$('#footer').animate({bottom: 0}),
$('#content').animate({bottom: 100}),
$('header nav, #right-tog, .bkgd-desc').fadeOut(300);

var rightpos = parseInt($('.right').css('right'));

if (rightpos == 0) {
$('.right

It looks to me like there a lot of differences in each function, it might take just as much code to account for all the differences, and by the time you are done it might be significantly more complicated! One thing that can help performance is caching your nodes by storing them as variables. To illustrate:

jQuery(document).ready(function($){

var $rightDiv = $('.right');
var $navsOne = $('header nav, #right-tog, .bkgd-desc');
var $navsTwo = $('header nav, header div, .right-tog, .bkgd-desc');
var $content = $('#content'); 

/*RIGHT ANIMATIONS*/
$("body").on('click', '.right-tog', function(event) {
    $rightDiv.animate({right: 0}),
    $content.animate({right: 300}),
    $navsTwo.fadeOut(300);
});

$("body").on('click', '#content, .click-thru, a[role=close]', function(event) {
    var divpos = parseInt(rightDiv.css('right'));

    if (divpos == 0) {
        $rightDiv.animate({right: '-100%'}),
        $content.animate({right: 0}),
        $navsTwo.fadeIn(300);
    };
});

/*LEFT ANIMATIONS*/
$("body").on('click', '.work', function(event) {
    $('.left').animate({left: 0}),
    $content.animate({left: 200}),
    $navsOne.fadeOut(300);
});

$("body").on('click', '#content, .work-link, a[role=close]', function(event) {
    var divPosition = parseInt($('.left').css('left'));

    if (divPosition == 0) {
        $('.left').animate({left: -1000}),
        $content.animate({left: 0}),
        $navsOne.fadeIn(300);
    };
});

etc... here is a little test that illustrates performance differences. That's a lot of animation!!

StackExchange Code Review Q#48771, answer score: 2