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: / (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.

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/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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Mar 16, 2011 at 15:47 Linens asked Mar 16, 2011 at 15:31 LinensLinens 7,9521313 gold badges5454 silver badges7373 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

I see you have a response. In case this version is of any help to you: http://jsfiddle/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'
});

There is a much easier way altogether of doing this. By using jQuery's scrollTo plugin, this can be done in a mere few lines of code, without using indices, calculations, or anything of that nature.

Live Demo http://jsfiddle/Jaybles/WEzny/