Jquery animate not working when used inside a function passing parmeters?

Question

This is the peice of code that I want to run to animate any css property with the same function.

.box {
    width: 100px;
    height: 100px;
    background-color: grey;
}

<div class='box'></div>

function animateDimension(el, dimension, value, callback) {
    var $el = $(el);
    callback = callback || function() {};
    $el.animate({
    dimension : value,
    },1000, callback);
}

Calling this function -

animateDimension($('.box'),'width',0, function(){
    $('.box').hide();
});

The box hides after one second but the width does not change. Can someone help me out???

Answer 1

Your code should be:

function animateDimension($el, dimension, value, callback) {
    var properties = {};
    properties[dimension] = value;
    callback = callback || $.noop;
    $el.animate(properties, 1000, callback);
}

http://jsfiddle.net/7afFH/ (Thx @vjs for jsfiddle!)

Answer 2

Another way to change width is

function animateDimension(el, dimension, value, callback) { var $el = $(el); callback = callback || function() {}; $el.animate({ width : value, },1000, callback); }

animateDimension($('.box'),'width','0px', function(){ $('.box').hide(); alert($('.box').css('width')) });

Here is demo http://jsfiddle.net/SiddharthShah/M3Kzh/