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]});
        });

});

Jquery animate（）同时在多个div上

1 个答案: