jQuery callbacks optimization

Question

I have a lot of repeatable blocks of code and want to optimize/simplify them:

    function animationInit() {
    content = $('#content')
        .bind('show',function(event, f) {
            $(this).animate({right:0}, lag + 200, function() {
                if (f) f();
            });
        })
        .bind('hide',function(event, f) {
            $(this).animate({right:-700}, lag + 200, function() {
                if (f) f();
            });
        });

    hotelnav = $('#hotel')
        .bind('show',function(event, f) {
            hotelnav.removeClass('small');
            $(this).animate({left:0}, lag + 200, function() {
                if (f) f();
            });
        })
        .bind('hide',function(event, f) {
            $(this).animate({left:isGallery()?-300:-300}, lag + 200, function() {
                hotelnav.addClass(isGallery()?'small':'');
                if (f) f();
            });
        });

    bottompanel = $('#bottompanel')
        .bind('show',function(event, f) {
            $(this).animate({bottom:40}, lag + 200, function() {
                if (f) f();
            });
        })
        .bind('hide',function(event, f) {
            $(this).animate({bottom:-120}, lag + 200, function() {
                if (f) f();
            });
        });

    booknow = $('#booknow')
        .bind('show',function(event, f) {
            $(this).fadeIn(lag + 200, function() {
                if (f) f();
            });
        })
        .bind('hide',function(event, f) {
            $(this).fadeOut(lag + 200, function() {
                if (f) f();
            });
        });     
};

How i can optimize repeatable parts of code with callbacks? Im trying to create separate function like this:

function cb(callback) {
    if (callback) callback();
};

... but just have a lot of asynchronous callbacks...

Answer 1

I don't understand the need for

function() {
    if (f) f();
}

put f instead of that whole thing. If it is undefined it won't get called.

e.g

.bind('show',function(event, f) {
    $(this).animate({right:0}, lag + 200, f);
});

Another thought came to me. The functions you use could be factored and used like:

function animateRight(event, f, rightValue, delay)
{
    $(this).animate({right: rightValue}, lag + delay, f);
}

(or if you can't pass that information in:

function animateRight(event, f, rightValue, delay)
{
    return new function()
    {
        $(this).animate({right: rightValue}, lag + delay, f);
    }
}