Javascript 在Jquery中对循环中的文本进行更改

我想做的似乎很简单。关键字似乎是。哈哈

我试图使文本在两种语言之间来回变化。有点像GIF类型的动画（尝试过但不喜欢它的外观），我知道flash会是更好的选择，但我没有这些功能，所以我转向了javascript——但我在那里的体验也不太好。这是我的HTML

<div id="welcomediv">
<h1 class="welcome" id="welcome">Welcome-Select your language</h1>
<h1 class="welcome" id="bienvenido">Bienvenido-Elegí tu idioma</h1>
</div>

我这样做的想法是，我可以使用jquery上下移动元素，然后它们就会消失在视野之外，得到我想要的东西。我想让它向上和向外移动，因为另一个正在滑回原位。我做到了。但就是不能让它循环

  $(document).ready(function () {
    $("#welcome").delay(3000).animate({ bottom: '30px' }, 1000);
    $("#bienvenido").delay(3000).animate({ bottom: '45px' }, 1000);
    });

我就是这样做的

---

现在我知道这可能不是最好的方法，所以非常感谢您的帮助！！我如何简单地使它循环？或者我应该完全更改它吗？

您可以使用

setInterval

进行此操作：

var showingWelcome = true;
setInterval(function() {
  if (showingWelcome) {
    $("#welcome").animate({ bottom: '30px' }, 1000);
    $("#bienvenido").animate({ bottom: '45px' }, 1000);
    showingWelcome = false;
  }
  else {
    $("#welcome").animate({ bottom: '0px' }, 1000);
    $("#bienvenido").animate({ bottom: '0px' }, 1000);
    showingWelcome = true;
  }
}, 3000);

下面是一个JSBin，它显示了它的工作原理

---

顺便说一下，在我看来，JavaScript对于这一点非常好，Flash也会被过分渲染。

< P>如果你所要做的就是动画文本来回，你可能想考虑使用CSS，比如：

.welcome {
    font-size:18px;
    font-weight:bold;
    font-family:Century Gothic;
    color:red;
    margin-top:5px;
    margin-bottom:30px;
    position:relative;
    animation: yourAnim 3s infinite alternate; /* name, duration, number of iterations, direction */
}

@keyframes yourAnim {
    0%{bottom: 0px;}
    25%{bottom: 0px;}
    50%{bottom: 55px}
    100%{bottom: 55px;}
}

---

请注意，为了简洁起见，省略了浏览器前缀。

也许您应该查看这些链接。当然，这对你的动画没有帮助。谢谢！！这非常有效。我自己永远也不会想到这些。@user3880230没问题！别忘了将此标记为答案。

.welcome {
    font-size:18px;
    font-weight:bold;
    font-family:Century Gothic;
    color:red;
    margin-top:5px;
    margin-bottom:30px;
    position:relative;
    animation: yourAnim 3s infinite alternate; /* name, duration, number of iterations, direction */
}

@keyframes yourAnim {
    0%{bottom: 0px;}
    25%{bottom: 0px;}
    50%{bottom: 55px}
    100%{bottom: 55px;}
}