Question

我有这个函数来移动绝对DIV，我想执行setTimeout函数。但是，当涉及行$（）。finish（）时，JQuery跳出hover（）函数。如何在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.
  });

在功能块内完成动画写入后你想要执行什么。

Answer 2

试试这个：

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

我希望这有帮助！

Answer 3

我以这种方式解决了我的问题（通过在结束（）之前放置超时功能，并在用户执行另一个悬停时清除超时）

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

这会对你有帮助，

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

动画完成后如何在JQuery中做一些事情（）

4 个答案: