同一选择器上的多个 Html 方法答案

【问题标题】：multiple Html Methods on the same selector同一选择器上的多个 Html 方法
【发布时间】：2018-10-24 02:16:51
【问题描述】：

我试图运行这段代码，但是当它运行文本时它已经“欢迎回来”，我希望它是“嗨！”首先是“欢迎回来”
如果有人知道有什么方法可以改变这个，请告诉我。

$(Animation)
.text('Hi!')
.slideUp(600)
.delay(600)
.text('Welcome Back')
.slideDown(600)
.delay(600)
.slideUp(600)

【问题讨论】：

根据this post，delay()默认是动画队列。这就是为什么您看到您的 slideUp() 和 slideDown() 正确发生，但文本没有更改的原因。对于text()，您必须以不同的方式queue()，或使用setTimeout()。

标签： javascript jquery html

【解决方案1】：

delay 方法仅适用于 jQuery 中的队列项（主要是动画）。这就是为什么您可以正确看到动画之间的延迟，而不是更改文本之间的延迟。如果你想做这样的改变，你需要使用setTimeout:

$("div").text('Hi!').slideUp(600);
setTimeout(function() {
    $("div")
        .text('Welcome Back')
        .delay(600)
        .slideDown(600)
        .delay(600)
        .slideUp(600);
}, 600);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

阅读有关seTimeout 和delay 的更多信息。

【讨论】：