Question

I am working with a demo code in which div will move to right side for a specific position and after that it will go for bottom
Means as

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

To make this type of animation which code should i read and use. i have come to know two code format.
I am pasting two code for demostation.

How to solve this issue:

    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

There’s no need to do any deferring here. We have callbacks that execute after something has completed, so we don’t need to catch the when/then/pipe deferred methods.

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

Here’s the jsFiddle