CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-animate
ffledgling
ffledgling

Reputation: 12140

jQuery animate confusing behaviour

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
                    }
                });
            });
        });

Upvotes: 1

Views: 108

Answers (2)

leon
leon

Reputation: 772

Try:

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

        }
    });
}

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

$(document).ready(function() {
    $('#flip').click(function() {
        moveToCenter(this);
    });
});​

Registering a callback as soon as the move to center animation is complete. If you do if before it completes, it could have weird effects, but nevertheless, quite possible.

Little optimization : passing an element to flipElem instead of using $('#flip') again, similar to moveToCenter(this)

Upvotes: 1

David Hellsing
David Hellsing

Reputation: 108480

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

Upvotes: 1

Related Questions