CODEWITHSUNDEEP
javascriptjqueryhtml
Jelle
Jelle

Reputation: 1050

How to do something in JQuery after animation Finish()

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

});

Upvotes: 26

Views: 56529

Answers (4)

Jelle
Jelle

Reputation: 1050

I solved my question in this way (by putting the timeout function before the finish() and clearing the timeout if another hover is performed by the user)

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




});

Upvotes: 2

KM123
KM123

Reputation: 1377

Try this:

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

I hope this helps!

Upvotes: 12

Dharam Mali
Dharam Mali

Reputation: 959

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

Upvotes: 1

dgk
dgk

Reputation: 899

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

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

Upvotes: 59

Related Questions