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

我的网页包含一个无序的文本列表（语言）。每一行上都有该语言的英语翻译和母语翻译，并用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>

---

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

可以使用关键帧动画来淡入/淡出元素。相同的动画可以应用于两个

span

元素，但只需将

.non

元素延迟一半的总动画运行时间，如下所示：

@关键帧淡出{
0%{不透明度：0；}
5%{不透明度：1；}
45%{不透明度：1；}
50%{不透明度：0；}
}
李斯潘{
不透明度：0；
动画：法迪诺特10秒无限；
}
李广农{
动画延迟：5s；
}

德国的
德意志银行


丹麦
丹斯克

您能提供工作的JSFIDLE吗？在所有浏览器中都是一样的吗？

function myRepeat() {

    var aniTime = 500;

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

}

setInterval(myRepeat, 8000);