Waiting for DIV to stop moving before proceeding to another page

I have a jQuery function on my page that animates a div (slides it up) when the user clicks on a Link. But I want the browser to go to the linked page only after the DIV has finis开发者_StackOverflowhed sliding up. Can we do this?

Does anyone have any references/articles/tutorials?

Thank you

You should have a javascript redirect in the callback of the slideUp method.

Example:

$('#divId').click(function() {
  $(this).slideUp('slow', function() {
    window.location = 'urlhere'; //relative url
  });
});

Or if the url is outside of the site, you replace the window.location with this:

 window.location = 'http://domainhere.com/urlhere'; //absolute url

There is usually a callback function that is called when the animation or effect completes. See this page - and click on view source for an example

Depends on how you've done the sliding, I personally would create a function:

if you follow the jQuery documentation

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
    window.location = 'http://example.com'
  });
});

If you provide code or more detail and can be more specific