jQuery仅在前一个动画完成时才在悬停动画上添加延迟

Question

我有一个小的jQuery sn-p，它根据图像的alt 属性（如果存在）为图像标题设置动画。

它工作正常，但我有一个小问题。我想要一个悬停 (slideUp) 动画上的 delay，但仅如果之前的 slideIn 动画完全完成。在基本场景中：

场景 1： 用户将鼠标悬停在图像上，字幕完全动画化。用户悬停在外，动画延迟（字幕保持不变）2 秒，然后动画化。

场景 2：用户将鼠标悬停在图像上，标题开始动画化，但用户在完成之前悬停在外。动画应立即停止并无延迟。

场景 1 完美运行。场景2没有。延迟发生在部分动画元素滑出之前，这是不希望的。我可以看到我的代码中的缺陷，但似乎无法弄清楚如何解决它。

Fiddle，以及当前脚本：

$('.pv-inner').hover(function() {

    var img = $(this).find('img:first');
    var text = img.attr('alt');

    if (text !== undefined) {
        //remove any existing captions
        $(this).find('.kppImageCaption').remove();

        //insert the new caption
        img.after('<div class="kppImageText">' + text + '</div><div class="kppImageCaption"></div>');

        //animate it in
        $(this).find('.kppImageCaption').stop().slideDown('slow').animate({
            opacity: 0.6
        }, {
            queue: false,
            duration: 'slow',
            complete: function() {
                $(this).parent().find('.kppImageText').fadeTo(1000, 1);
            }
        });
    }
}, function() {

    //on hover out animate it out. Here is the problem. I only want the delay 
    //to occur if the above hover over animation completed - currently it delays
    //in all cases.
    $(this).find('.kppImageCaption, .kppImageText').stop().delay(2000).slideUp('slow', function() {
        $(this).remove();
    });

});

编辑：

Final working fiddle。可以帮助未来的人。

Answer 1

创建变量，我们称之为var animationStatus = false 在开始动画之前，设置animationStatus = true

在complete 函数中（参见jQuery animate docs）设置animationStatus = false

在您负责隐藏的函数中 - 创建 if 语句。如果 animationStatus === false - 延迟。如果 animationStatus === true - 没有延迟。

祝你好运！