Start two events simultaneously using .trigger and/or .animate

Question

I have the following... jsFiddle

CSS

#box_1 {
    position:absolute;
    height:50px;
    width:50px;
    background-color:red;
    top:10px;
    left:10px; 
    text-align:center;
    color:#FFFFFF;
}

#box_2 {
    position:absolute;
    height:50px;
    width:50px;
    background-color:blue;
    top:10px;
    left:70px; 
    text-align:center;
    color:#FFFFFF;
}

#box_3 {
    position:absolute;
    height:50px;
    width:50px;
    background-color:green;
    top:10px;
    left:130px; 
    text-align:center;
    color:#FFFFFF;
}

#box_4 {
    position:absolute;
    height:50px;
    width:50px;
    background-color:yellow;
    top:10px;
    left:190px; 
   text-align:center;
}    

#box_5 {
    position:absolute;
    height:110px;
    width:110px;
    background-color:purple;
    top:100px;
    left:70px; 
}    

#box_6 {
    position:absolute;
    height:25px;
    width:50px;
    background-color:black;
    top:20px;
    left:300px; 
    text-align:center;
    color:#FFFFFF;
}

JQuery

$('#box_1').click(function() {  
    $('#box_5').animate({
            top: '170px'
        }, 300);
});

$('#box_2').click(function() {  
    $('#box_5').animate({
            left: '170px'
        }, 600);
});

$('#box_3').click(function() {  
    $('#box_1').trigger('click');
    $('#box_2').trigger('click');
});

$('#box_4').click(function() {  
    $('#box_5').animate({
            top: '170px'
        }, 300);
    $('#box_5').animate({
            left: '170px'
        }, 600);
});

$('#box_6').click(function() {  
    $('#box_5').animate({
            top: '100px'
    }, 200);
    $('#box_5').animate({
            left: '70px'
    }, 200);
});

HTML

<div id="box_1">
    Down
</div>
<div id="box_2">
    Right
</div>
<div id="box_3">
    Both
</div>
<div id="box_4">
    Both
</div>
<div id="box_5"></div>
<div id="box_6">
    Reset
</div>

And I'm wondering whether it's possible to have both the .trigger events on box_3 (The green square with "Both" in it) fire at the same time, so instead of the purple box going down and then right, have it start them both at the same time and move diagonally across the page a little before completing the remaining 300ms on the left 600ms animation after.

Ideally, I'd like to keep box_3 .click to just trigger box_1 and box_2 clicks, but have them start at the same time.

If this is not possible, is it possible to combine the

$('#box_5').animate({
        top: '170px'
}, 300);
$('#box_5').animate({
        left: '170px'
}, 600);

on the Yellow box_4 so they both start at the same time?

So, the order of events would be,

1. You click Box_3 (.trigger) or Box_4 (.animate).
2. Box 5 moves diagonally down and right.
3. 300 ms after clicking the moving down animation completes
4. 600 ms after clicking the moving right animation completes

Can anyone help me?

If it is possible to do this both ways, could you show me them both so I can keep them for future references.

Answer 1

If you want to animate two properties on one element at the same time, you must do it inside of a single call to .animate(), otherwise they will be queued to happen one after the other. In your case, you need to move it diagonally 300ms, then right for 300 ms.

.animate({
    top: "170px",
    left: 170/2 + "px"
},300).animate({
    left: "170px"
},300)

http://jsfiddle.net/cAsyB/1/

You can also set the queue option to false to get the same effect:

$('#box_5').animate({
    top: '100px'
}, {
    duration: 200, 
    queue: false
});
$('#box_5').animate({
    left: '70px'
}, {
    duration: 400, 
    queue: false
});

http://jsfiddle.net/cAsyB/2/