How can i change dimension of picture with animate

Question

i have this function for 10 elements (images) and i need to click on each and grow abit then when i click on another to resize back to its original dimension and grow the last i've clicked.Heres some code:

EDIT: http://jsfiddle.net/MruMR/

var Answers = new Array();
var growing = true;

$(Answers).click(function(e){
    if(growing)
        $(e.target).animate({width:'400px'}, 500, function(){
        });
    else
        $(e.target).animate({width:'360px'}, 500, function(){
        });
    growing=!growing;
});

 for (var i = 0; i < 10; i++) {
        var elemente = document.getElementById("simbol" + i);
        Answers.push(elemente);
    }

Answer 1

You should add a class to every simbol* element, then you would be able to bind handler to future elements by adding selector.

$(document).on('click', '.simbol', function() { ... });

To correctly grow/shrink elements, (IMHO) it should look something like this:

$('.simbol').not(e.target).animate({width:'360px'}, 500);//shrink all except the clicked one
$(e.target).animate({width:'400px'}, 500); //grow the clicked one

However it would be better to do this with CSS3:

//jQuery
$('.simbol').removeClass('grow');
$(e.target).addClass('grow');

/* CSS3 */
.simbol { width: 360px; transition: width 0.5s;}
.simbol.grow { width: 400px; }