JQuery animated banner

Question

So I previously asked a question about how to create a banner like the one shown here and I got a really good answer to start me off. I have been working on it since and I'm having a lot of problems getting the animation to slide back to it's original position.
Here is my animation: http://jsfiddle.net/43nCF/ (don't click the green block first)
Issue: After the first time you toggle a block, clicking another block will not move it to the left.
I also have some other minor issues which I would be grateful if someone helped me with.

• How do I get the width and the moving of the blocks to animate simultaneously like in the banner animation I am trying to replicate?
• How do I get the block to slide back to the original position instead of just kind of 'transporting' there?

I am only beginner at jQuery so any help would be amazing.Thanks.

Answer 1

As for the positioning problem: you need to drop the left declaration in your second function.

Regarding making the animation act simultanous: animate both the right and the width property for each element, in one call:

function() {
    var position = $.data(this, 'position');
    var ind = $(this).index();
    //moves image back to original position

    $('#container div').each(
    function() {
        $(this).animate({
            right: "",
            width: 100

        });
    });
});

Working example here.

Answer 2

I see you have a response. In case this version is of any help to you: http://jsfiddle.net/vCbcz/ Instead of altering the divs other than the one being affected, I wrapped them all in a #slider div and adjusted that one's left margin to push it to the left.

$('#slider').animate({
    marginLeft: '-' + ind * 105 + 'px'
});

and back

$('#slider').animate({
    marginLeft: 0 + 'px'
});