Animation Code Being Ignored

Question

I'm having a problem with JQuery animations, I've written a basic webpage that has a login box and when clicking login, the following function is executed.

function buttonClick() {    
    $('div.login').animate({bottom: '500px'});
    window.location.href = 'home.html'
}

When the only code in the function is the animation it works fine but as soon as I introduce the window.location.href code is won't execute in time and the page changes before the animation has even started. Any ideas how to delay the execution of the window line?

Thanks!

Answer 1

使用animate()

的完整回调

function buttonClick() {    
    $('div.login').animate({bottom: '500px'}, function(){
       // animation has completed here
       window.location.href = 'home.html'
    });    
}