使用 jQuery 连续交换两个内联 span 元素答案

【问题标题】：Continuously swap two inline span elements in and out using jQuery使用 jQuery 连续交换两个内联 span 元素
【发布时间】：2017-03-28 10:31:00
【问题描述】：

我的网页包含无序列表的文本（语言）。每一行是包含在 SPAN 标签中的英语翻译和该语言的母语翻译：

<li><span class="eng">German</span><span class="non">Deutsche</span></li>
<li><span class="eng">Denmark</span><span class="non">Dansk</span></li>

我想要做的就是让页面在英文跨度和母语跨度之间来回切换 5 秒左右。下面的代码可以正常工作，只是它会随着时间的推移慢慢加速。知道如何调整它以使其保持不变吗？

function myRepeat() {

    var aniTime = 500;

    $('.eng').fadeToggle(aniTime).delay(aniTime);
    $('.non').fadeToggle(aniTime).delay(aniTime);

}

setInterval(myRepeat, 8000);

【问题讨论】：

你能提供工作的jsfiddle吗？
所有浏览器都一样吗？

标签： javascript jquery html css

【解决方案1】：

您可以通过使用 CSS over JS 来实现这一点。这具有硬件加速和更易于维护的好处。

您可以使用使元素淡入/淡出的关键帧动画。相同的动画可以应用于两个 span 元素，但只需将 .non 元素延迟总动画运行时间的一半，如下所示：

@keyframes fadeInOut {
  0% { opacity: 0; }
  5% {  opacity: 1; }
  45% { opacity: 1; }
  50% {  opacity: 0; }
}

li span {
  opacity: 0;
  animation: fadeInOut 10s infinite;
}

li span.non {
  animation-delay: 5s;
}

<ul>
  <li>
    <span class="eng">German</span>
    <span class="non">Deutsche</span>
  </li>
  <li>
    <span class="eng">Denmark</span>
    <span class="non">Dansk</span>
  </li>
</ul>

【讨论】：