Question

I am attempting to optimize my code after seeing some repetition.

Here is the code:

function show($div, $change, $value){
    var $container = "#" + $div;
    var $class = $div + "-" + "hidden";

    //alert($class + $container + $change + $value);

    $($container).addClass($class);
    $($container).animate({
        $change: $value
    }, 1000, function(){
            $($container).removeClass($class);
        } 
    );
}

show('header', 'top', '0');
show('nav', 'left', '0');
show('wrapper', 'opacity', '0');

This area: $change: $value – is where I am having trouble in the script. Can I do this? Should they come in as strings?

Answer 1

function show($div, $change, $value){
    var $container = "#" + $div;
    var $class = $div + "-" + "hidden";

    //alert($class + $container + $change + $value);

    $($container).addClass($class);

    var animation = {}; // create another object
    animation[$change] = $value; // and set its property

    $($container).animate(animation, 1000, function(){
            $($container).removeClass($class);
        } 
    );
}