Jquery animate() on multiple divs at the same time

Question

I'm trying to animate 15 divs out of my window. I first animate these divs into the screen using the following code:

$('.title2').bind('click',function(){

    $('#i1 div').delay( 0 ).animate({left : 200,    top :210}, {duration: 'slow',easing: 'easeOutBack'});
    $('#i2 div').delay(100).animate({left : 250,    top :350}, {duration: 'slow',easing: 'easeOutBack'});
    $('#i3 div').delay(200).animate({left : 550,    top :200}, {duration: 'slow',easing: 'easeOutBack'});
    $('#i4 div').delay(400).animate({left : 450,    top :70},  {duration: 'slow',easing: 'easeOutBack'});
    $('#i5 div').delay(100).animate({left : 595,    top :60}, {duration: 'slow',easing: 'easeOutBack'});
    $('#i6 div').delay(900).animate({left : 580,    top :410}, {duration: 'slow',easing: 'easeOutBack'});
    $('#i7 div').delay(500).animate({left : 1020,   top :230}, {duration: 'slow',easing: 'easeOutBack'});
    $('#i8 div').delay(600).animate({left : 530,    top :550}, {duration: 'slow',easing: 'easeOutBack'});
    $('#ix div').delay(700).animate({left : 875,    top :270}, {duration: 'slow',easing: 'easeOutBack'});
    $('#v1 div').delay(100).animate({left : 350,    top :200}, {duration: 'slow',easing: 'easeOutBack'});
    $('#v2 div').delay( 0 ).animate({left : 380,    top :395}, {duration: 'slow',easing: 'easeOutBack'});
    $('#v3 div').delay(200).animate({left : 700,    top :150}, {duration: 'slow',easing: 'easeOutBack'});
    $('#v4 div').delay(800).animate({left : 880,    top :70}, {duration: 'slow',easing: 'easeOutBack'});
    $('#t1 div').delay(200).animate({left : 525,    top :335}, {duration: 'slow',easing: 'easeOutBack'});
    $('#t2 div').delay(400).animate({left : 998,    top :370}, {duration: 'slow',easing: 'easeOutBack'});
});

Now when i try to remove all these divs using a click for instance they only move within the y-axis.

This is the code for the return animation:

$('.title1').bind('click',function(){
        var alles = $('#i1 div,#i2 div,#i3 div,#i4 div,#i5 div,#i6 div,#i7 div,#i8 div,#ix div,#v1 div,#v2 div,#v3 div,#v4 div,#t1 div,#t2 div')
        alles.animate({right:0, top:200});
    });

Hope you guys can help.

Answer 1

Try this. I believe the problem you are having is that you are animating with left and then right, so the old left position overrides. You should animate by one or the other but not both. Here I am using the width of the offsetParent to provide the offscreen positioning for left. Also bind is deprecated, use on instead.

$('.title1').on('click',function(){
        $('#i1 div,#i2 div,#i3 div,#i4 div,#i5 div,#i6 div,#i7 div,#i8 div,#ix div,#v1 div,#v2 div,#v3 div,#v4 div,#t1 div,#t2 div').each(function(){
              var that = $(this),
                  WW   = that.offsetParent().width();                  
              that.animate({left:WW, top:200});
        });

});

---

$('#i1 div,#i2 div,#i3 div,#i4 div,#i5 div,#i6 div,#i7 div,#i8 div,#ix div,#v1 div,#v2 div,#v3 div,#v4 div,#t1 div,#t2 div').each(function(){
     var that = $(this);
     that.data('origin',[that.css('left'),that.css('top')]);
});

$('.title1').on('click',function(){
        $('#i1 div,#i2 div,#i3 div,#i4 div,#i5 div,#i6 div,#i7 div,#i8 div,#ix div,#v1 div,#v2 div,#v3 div,#v4 div,#t1 div,#t2 div').each(function(){
              var that = $(this),
                  origin = that.data('origin');                  
              that.animate({left:origin[0], top:origin[1]});
        });

});