jquery - jQuery 动画的步骤

Question

我正在使用一个演示代码，其中 div 将移动到右侧以获得特定位置，然后它将移动到底部意味着

DIV started moving------------------>     
                                    . Div turn to bottom        
                                    .
                                    .
                                    .
                                    .
                                    .
                                    V
                       Div's place after move and turn

为了制作这种类型的动画，我应该阅读和使用哪些代码。我已经知道了两种代码格式。我正在粘贴两个演示代码。

如何解决这个问题：

    1. $( 'span' ).animate({ 
        // Properties of the elements to animate 
        opacity: 0.25, 
        left: '+=50' 
    }, 
    { 
        // step is a callback for each step of the animation 
        step: function( now, fx ) { 
            // do stuff... 
        } 
    }); 


  2. $.when($('#foo').animate({
            top: 100,
            left: 100
        }, 3000)).pipe(function() {
            return this.animate({
                top: 0,
                left: 0
            }, 3000);
        }).then(function() {
            console.log('done');
        });

Answer 1

这里没有必要做任何推迟。我们有在某事完成后执行的回调，因此我们不需要捕获 when/then/pipe 延迟方法。

$('span').animate({
    top: 100,
    left: 100
}, 3000, function(){
    $('span').animate({
        top: 0,
        left: 0
    }, 3000, function(){ 
        console.log('done')
    });
});

这是jsFiddle