同時在多個div上的jquery動畫（）

Question

我試圖在我的窗口外動畫15個d​​iv。當我嘗試刪除使用例如點擊他們只y軸中移動所有這些div

$('.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'}); 
}); 

現在： 我第一次使用下面的代碼動畫這些div到屏幕。

這是返回動畫代碼：

$('.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}); 
    }); 

希望你們可以幫忙。

Answer 1

試試這個。我相信你遇到的問題是你用左手再右手做動畫，所以舊的左手位置會覆蓋。你應該通過一個或另一個動畫，但不是兩個。在這裏，我使用offsetParent的寬度來爲左側提供偏離屏幕的位置。另外bind已棄用，請改爲使用on。

$('.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]}); 
     }); 

});