3

ウィンドウから 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});
    });

皆さんが助けてくれることを願っています。

4

1 に答える 1

2

これを試して。あなたが抱えている問題は、左と右でアニメートしているため、古い左の位置が上書きされることだと思います。両方ではなく、どちらか一方によってアニメーション化する必要があります。ここでは、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]});
        });

});
于 2013-02-01T21:58:47.537 に答える