How to do something in jQuery after Finish () animation

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 to do 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 do you want to do after full animation, write inside the function block.

Answer 2

Try the following:

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

Hope this helps!

Answer 3

I solved my question this way (by placing the timeout function before the finish () and clearing the timeout if the user directs another hover)

 var time = null; $('#header li[class!="logo"]').hover(function () { window.clearTimeout(time); var linksstart = $(this).position().left; var breedte = ($(this).width() / 2) - 22; $('#header .pointerarrow').animate({ left: linksstart + breedte }, 300); }, function () { time = setTimeout(function () { //alert('gelukt2'); var l = $('#header li[class="current"]').position().left; var b = ($('#header li[class="current"]').width() / 2) - 22; $('#header .pointerarrow').animate({ left: l + b }, 300); }, 400); $('#header .pointerarrow').finish(); }); 

Answer 4

It will help you

 $('#header li[class!="logo"]').hover(function () { var linksstart = $(this).position().left; var breedte = ($(this).width() / 2) - 22; $('#header .pointerarrow').animate({ left: linksstart + breedte }, 400,function(){ //animation complete, alert('gelukt2'); var l = $('#header li[class="current"]').position().left; var b = ($('#header li[class="current"]').width() / 2) - 22; $('#header .pointerarrow').css({ left: l + b }); }); }, function () { $('#header .pointerarrow').finish(); });