How to do something in JQuery after animation Finish()

Question

I have this function to move an absolute DIV and I want to execute the setTimeout function. However, JQuery jumps out of the hover() function when it comes to the line $().finish(). How do I execute something after the finish()?

$('#header li[class!="logo"]').hover(function () {

    var leftStart = $(this).position().left;
    var width = ($(this).width() / 2) - 22;

    $('#header .pointerarrow').animate({ left: leftStart + width }, 400);

}, function () {
    $('#header .pointerarrow').finish();

    //######This does not excecute###########
    setTimeout(function () {
        alert('succeeded');
        var l = $('#header li[class="current"]').position().left;
        var b = ($('#header li[class="current"]').width() / 2) - 22;
        $('#header .pointerarrow').css({ left: l + b });
    }, 500);

});

Answer 1

$('#header .pointerarrow').animate(
    { left: linksstart + breedte },
     400, function() {
       // Animation complete.
  });

What ever you want to perform after complete animation write inside function block.

Answer 2

Try this:

$('#header .pointerarrow').animate({ left: linksstart + breedte }, 400);
$('#header .pointerarrow').promise().done(function(){
    /* PUT FUNCTION HERE */
});

I hope this helps!