JQuery не работает при использовании внутри функции, проходящей через парметометры?

Question

Это фрагмент кода, который я хочу запустить, чтобы анимировать любое свойство css с той же функцией.

.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); 
} 

Вызов этой функции -

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

коробка скрывает через одну секунду, а ширина не меняется. Кто-нибудь может мне помочь???

Answer 1

Ваш код должен быть:

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 для jsfiddle)

Answer 2

Другой способ изменить ширину является

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')) });

Здесь есть демо http://jsfiddle.net/SiddharthShah/M3Kzh/