jquey animation in steps
<p>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</p>

<pre><code>DIV started moving------------------&gt;     
                                    . Div turn to bottom        
                                    .
                                    .
                                    .
                                    .
                                    .
                                    V
                       Div's place after move and turn
</code></pre>

<p>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.</p>

<p>Please guide me.</p>

<pre><code>    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');
        });
</code></pre>
