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

标签 css jquery jquery-effects

所以我有一个空的 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');

最佳答案

你只能delay()动画,不能像html()这样的其他函数,它们是立即执行的。

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

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

关于css - 排队定时 jquery 事件无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10340889/

相关文章:

html - Bootstrap 导航链接未打开

jquery - 将滚动条添加到 svg 容器

javascript - 如何获取 jQuery UI 选项卡元素面板并设置其中一些的可见性?

jquery - 停止脉动 jQuery 效果

css - 如何将文本对齐到未知大小图像的左下角?

css - 为什么#wrapper 的背景颜色没有显示在左侧和内容列的后面?

javascript - 如何在调整 div 大小时停止点击计数

javascript - 自动随机翻转

jQuery.Cycle - 在同一容器上使用两种不同的效果

javascript - jQuery 调整图像大小