Question

请参阅Matt对this question的回答。他说.delay()让大多数人感到困惑，他给出了以下例子：

$('#foo').hide().delay(2000).slideDown().text('Hello!').delay(2000).hide();

请参阅here小提琴。有人可以解释一行代码的行为吗？

Answer 1

只有jQuery代码的某些部分可以通过.delay()推送 - hide()而text() 不是该群组的一部分。

所以基本上代码正在做的是（不是真的这样做，这只是一个草图）：

setTimeout(function(){
    $('#foo').slideDown();
}, 2000);
$('#foo').hide().text('Hello!').hide();

这就是slideDown()似乎最后发生的原因。

Answer 2

已经解释了它行为不端的原因。要获得所需的行为，请使用queue：

$('#foo')
    .hide()
    .delay(2000)
    .slideDown()
    .queue(function() {
        $(this).text('Hello!').dequeue();
    })
    .delay(2000)
    .queue(function() {
        $(this).hide().dequeue();
    });

Answer 3

delay在动画队列中放置延迟（无效动画），因此它只会影响其他动画。在hide之后链接delay不会延迟hide，它仍会立即发生。

如果将方法划分为一次影响元素的方法，以及启动动画的方法，则会得到相同的代码：

$('#foo').hide().text('Hello!').hide(); // set text and hide twice
$('#foo').delay(2000).slideDown().delay(2000); // wait, slide, wait and do nothing

Debunking .delay（）

3 个答案: