Jquery animate() 同时作用于多个div

Question

我正在尝试为窗口外的 15 个 div 制作动画。我首先使用以下代码将这些 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 时，例如它们仅在 y 轴内移动。

这是返回动画的代码:

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

});