css - 排队定时 jquery 事件无法正常工作

Question

所以我有一个空的 div 设置为 display:none，称为 id="c1"。

我正在尝试对其进行排队，以便它会淡入并会说：2秒

然后 1 秒后它会说： 1 秒

然后将淡出并且页面重定向。

$('#c1').html('2 seconds').fadeIn('fast').delay(800).html('1 second').delay(800).fadeOut('fast');

但是，当我运行它时，我只看到“1 秒”并且它消失了。我根本看不到 2 秒的消息。就像 jquery 只监听最后一个“html”事件一样。

我还尝试在 div 中输入“2 秒”作为 html 中的默认文本。那也行不通。页面加载后仍然显示“1 秒”。

编辑解决方案

你可以这样做：

$('#c1').html('2').fadeIn('fast').delay(800).queue(function () {$(this).html('1');$(this).dequeue();}).delay(800).fadeOut('fast');

score 2 · Accepted Answer

您只能延迟（）动画，而不是像 html（）这样的其他函数，它们会立即执行。

对 html() 函数使用超时，或者将它们放在动画回调中。

$('#c1').html('2 seconds').fadeIn(1000, function() {
   $(this).html('1 second').fadeOut(1000);
});

score 1 · Accepted Answer

尝试

    $('#c1').html('2 seconds')fadeIn('fast');
    setTimeout($('#c1').html('1     second'), 800);
    setTimeout($('#c1').fadeOut('fast'), 800);

score 1 · Accepted Answer

对，文档声明：“它可以与标准效果队列或自定义队列一起使用”，但是像 .html() 这样的操作没有使用效果队列......

3 回答 3