JQueryUI - Slide divs left/right at the same time

Question

I'd like to slide two divs at the same time (left/right, right/left, up/down, down/up). Here's a JSFiddle where it does that, but when I hide the divs in this JSFiddle , it's not simultaneous on top of each other. I've tried using animate and more on direction, but have come to no avail.

This is some of the code I have written:

$( document ).ready(function() {
    $('#div2, #div3, #div4, #div5, #div6, #div7, #div8').hide();
    $('#div2').delay(2000).toggle('slide', {direction: 'left'}, 'slow');
    $('#div3').delay(3000).toggle('slide', {direction: 'up'}, 'slow');
    $('#div4').delay(4000).toggle('slide', {direction: 'down'}, 'slow');
    $('#div5').delay(5000).toggle('slide', {direction: 'left'}, 'slow');
    $('#div6').delay(6000).toggle('slide', {direction: 'right'}, 'slow');
    $('#div7').delay(7000).toggle('slide', {direction: 'down'}, 'slow');
    $('#div8').delay(8000).toggle('slide', {direction: 'up'}, 'slow');
});

Answer 1

If I understand correctly you want the left and right, or top and bottom to slide at the same time, if this is correct just change the delay to be the same

$('#div5').delay(1000).toggle('slide', {direction: 'left'}, 'slow');
$('#div6').delay(1000).toggle('slide', {direction: 'right'}, 'slow');

fiddle