只有在上一个动画完成时，jquery才会在悬停输出动画上添加延迟

我有一个小的

jQuery

片段，它根据图像的

alt

属性（如果存在）为图像标题设置动画

工作正常，但我有一个小问题。我希望在悬停（

slideUp

）动画上有一个

delay

，但是只有在上一个

slideIn

动画完全完成的情况下才能。在基本场景中：

场景1:用户将鼠标悬停在图像上，标题在图像中完全动画化。用户悬停，动画延迟（标题保持不变）2秒，然后动画输出

场景2:用户将鼠标悬停在图像上，标题开始在图像中设置动画，但用户在完成之前将鼠标悬停在图像外。动画应立即停止，并在不延迟的情况下设置动画

场景1非常有效。场景2没有。延迟发生在部分动画元素上，然后它滑出，这是不需要的。我可以看到代码中的缺陷，但似乎不知道如何解决它

，以及当前脚本：

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

});

$（'.pv-inner'）.hover（函数（）{
var img=$（this.find（'img:first'）；
var text=img.attr（'alt'）；
如果（文本！==未定义）{
//删除任何现有的标题
$（this.find（'.kppImageCaption'）.remove（）；
//插入新标题
符号后（“”+文本+“”）；
//在中设置动画
$（this）.find（'.kppImageCaption'）.stop（）.slideDown（'slow'）.animate({
不透明度：0.6
}, {
队列：false，
持续时间：“慢”，
完成：函数（）{
$（this.parent（）.find（'.kppImageText'）.fadeTo（1000,1）；
}
});
}
}，函数（）{
//悬停时，将其设置为动画。问题是，我只希望延迟
//如果上述悬停在动画上完成，则会发生-当前会延迟
//在所有情况下。
$（this）.find（'.kppImageCaption，.kppImageText'）.stop（）.delay（2000）.slideUp（'slow'，function（））{
$（this.remove（）；
});
});

编辑：

---

。可能会帮助某些人。

创建变量，我们称之为

var animationStatus=false

在开始设置动画之前，请设置

animationStatus=true

在

complete

函数中（参见jQuery animate docs）设置

animationStatus=false

在负责隐藏-CREATEIF语句的函数中。如果animationStatus==false-延迟。如果animationStatus===true-无延迟

---

祝你好运

谢谢，我会试试这个-如果我在一个页面上有多个使用这个脚本的图像，我想他们会共享这个变量吗？我对js中的范围很残忍。我也在考虑使用/检测css类作为标志。谢谢你的帮助。我使用了与您建议的方法相同的方法，但使用了css类标志，以确保在一个页面上有多个带有标题的图像时，js范围不会出现问题。最后一把小提琴：很高兴听到：）这也是为什么我试图解释一个想法，而不是提供一个有效的解决方案（代码）。喜欢看人们自己是如何做的：）