Question

I’m admittedly new to jQuery, but I know a bit of javascript, I’m trying to animate a div with a couple of animations.

I want the div to first move to the center of the page
Then I want it to flip after it has reached the center and then expand.

The trouble I’m having is using the .animate() method to change the top and left properties of the div to get it to the center.

---

The issue is that the .animate method in the moveToCenter function doesn’t actually animate the movement to the center, It just skips the animation part (properties change, but the change is not animated) and proceeds to the flip and rest of it.

Can some-one tell me why this is happening/Where I am going wrong?

And how can it(if at all) be fixed?

---

The HTML

<div id="flip" style="background-color:#ff0000;
               width:200px;
               height:200px;
               position:absolute">

  <h4> printf("Hello World"); </h4>
</div>

The JS

function moveToCenter()
{
    $('#flip').animate({'top':'300','left':'300'});
}

$(document).ready(function() {
    $('#flip').click( function() {

            moveToCenter(); //function that is supposed to moves the div to the center

            $(this).flip({
                    content: 'Scanf()',
                    color: '#00FF00',
                    direction: 'lr',
                    onEnd:  function(){ $('#flip').animate({ 
                    'height' : '400', 'width': '300'
                    }       
                    ,'500','swing');

                    lol(); //Another function that does some other animations
                    }
                });
            });
        });

Answer 1

If you want to flip after the animation is done, add a callback like this:

function moveToCenter(done){
    $('#flip').animate({'top':'300','left':'300'}, done);
}

The function will call the done method when the animation is complete. So now you just need to pass it:

moveToCenter(function() {
    // now the animation is done, move on
    $(this).flip({ //... etc