Come fare qualcosa in JQuery dopo l'animazione Fine()

Question

Ho questa funzione per spostare un DIV assoluto e voglio eseguire la funzione setTimeout. Tuttavia, JQuery salta fuori dalla funzione hover() quando arriva alla riga $(). Finish(). Come posso eseguire qualcosa dopo il 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. 
    }); 

Che cosa mai si desidera eseguire dopo la completa scrittura animazione all'interno del blocco funzionale.

Answer 2

Questo vi aiuterà,

$('#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(); 
}); 

Answer 3

Prova questo:

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

Spero che questo aiuta!

Answer 4

ho risolto la mia domanda in questo modo (mettendo la funzione di timeout prima del traguardo() e di compensazione il timeout se un altro passaggio del mouse viene eseguita dall'utente)

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




});