Javascript setInterval：第一个间隔是突然的

Question

在下面的示例中使用JavaScript的setInterval方法和jQuery效果时，初始显示似乎不会使用fadeIn方法。突然显示“文字”。

通过以fadeIn（）开头的效果链的后续迭代按预期执行。这只是第一次在没有淡入淡出效果的情况下突然显示“文本”的过程。

关于为什么会发生这种情况的任何想法？ 谢谢 - 一个JavaScript初学者。

setInterval(myFunction, 1000);
function myFunction() {
    $('#myId').fadeIn(1500).html("text").delay(2750).fadeOut(1500).delay(1000;
};

Answer 1

如果在淡入后添加文本，可能会在没有注意到的情况下淡入淡出。切换它，在淡入之前添加文本。 确保它没有预先显示（在CSS中，或者你需要它）。

$('#myId').html("text").fadeIn(1500).delay(2750).fadeOut(1500).delay(1000);

Answer 2

假设您的文本最初是空白且隐藏的，那么您将淡入一个空元素，然后仅在元素淡入后将文本设置为text。反转这些步骤：

$('#myId').html("text").fadeIn(1500).delay(2750).fadeOut(1500).delay(1000);

setInterval(myFunction, 1000);
function myFunction() {
    $('#myId').html("text").fadeIn(1500).delay(2750).fadeOut(1500).delay(1000);
};

#myId { display: none; }

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

</div>