Jquery multiple animations multiple elements one onclick function

Question

Okay so I have a table with 3 images all in the class .iconeffect each with a different ids(#effect1,2,3) and I am trying to animate them onclick. This is the current code I have but there is a problem with the 2nd animations.

$('#effect1').click(function() {
    $(this).finish();
    $(this).animate({ right: 200 });
    $('#effect2, #effect3').animate({ left: 1000 });
});

Now this code, should animate #effect1 one way and the other two effects the opposite way(offscreen), the first one animates but the second and third effects dont animate. They move to their end position after hovering over them. If you hover over them prior to clicking the first one they will animate normally.

EDIT: JSFIDDLE http://jsfiddle.net/9EqNy/24/

Answer 1

Juste add position:relative in the CSS for your 3 DIVs:

#effect1 {
    width:100px;
    height:100px;
    background-color:red;
    position:relative;
}

Fiddle : http://jsfiddle.net/wchXQ/

Answer 2

you need to disable the queue for the animations that shall run at the same time:

$('#effect1').click(function() {
    $(this).finish();
    $(this).animate({ right: 200, queue : false });
    $('#effect2, #effect3').animate({ left: 1000, queue : false });
});

From the jQuery API Docs:

queue (default: true)

Type: Boolean or String A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.

[Edit] try this:

$('#effect1').click(function() {
    $(this).finish();
    var self = this;
    setTimeout(function(){
        $(self).animate({ right: 200, queue : false })
    },1);
    setTimeout(function(){
        $('#effect2, #effect3').animate({ left: 1000, queue : false });
    },1);
});