如何延迟警报？

Question

我试图延迟警报，但无法让它工作，当 #foo 悬停在上方并且大小增加时，它总是弹出：

$('#foo').hover(function() {
 $(this).animate({width :'400px'}, 'slow');
},
function() {
 $(this).delay(2000).animate({width :'40px'}, 'slow');
alert('Im an alert message');
});

但我希望它仅在 #foo 减少回原始状态后才显示。 ..

Answer 1

使用回调怎么样？

$('#foo').hover(function () {
    $(this).animate({
        width: '400px'
    }, 'slow');
}, function () {
    $(this).delay(2000).animate({
        width: '40px'
    }, 'slow', function () { //callback function, which runs very next to .animate()
        alert('Im an alert message');
    });
});

Answer 2

您需要在回调中执行此操作。这是动画完成时将调用的函数：

$(this).delay(2000).animate({width :'40px'}, 'slow', function(){
    alert("I'm an alert message");
});

请参阅 animate API< /a>.

Answer 3

看起来您想在 animate 函数上使用回调？

http://api.jquery.com/animate/

$(this).delay(2000).animate({width :'40px'}, 
    'slow',
    function () {
        alert('Im an alert message');
    }
);

Answer 4

使用setTimeout函数：http://www.w3schools.com/js/js_timing.asp

$('#foo').hover(function() {
 setTimeout(function(){$(this).animate({width :'400px'}, 'slow');}, 3000);
}

上面的代码应该延迟 3 秒。