Javascript 以正确的延迟设置箭头动画？

我有3个箭头指向右边，如下所示：

我试着做一个动画，第一个淡入，一个延迟，第二个淡入，一个延迟，第三个淡入，一个延迟，一轮又一轮

我已经做了以下几步，但运行起来并不顺利

我想让它看起来像是一组闪烁的箭头，3个箭头指向右边，可以说是“转到这里”

       function animate() {
           $('.left').fadeIn(300).delay(250).fadeOut(250);
           $('.middle').delay(300).fadeIn(250).fadeOut(250);
           $('.right').delay(400).fadeIn(200).fadeOut(200);
            }
       animate();
       setInterval(animate, 1000);

是否有任何调整可以使它看起来像正确的延迟

---

编辑：在此拨弄此解决方案使用CSS3关键帧：

CSS:

JS:

---

此解决方案将jQuery用于动画：

jQuery：

function animate() {
    $('.left').fadeTo(500, 1).delay(500).fadeTo(500, 0);
    $('.middle').delay(250).fadeTo(500, 1).delay(500).fadeTo(500, 0);
    $('.right').delay(500).fadeTo(500, 1).delay(500).fadeTo(500, 0);
}
setInterval(animate, 2000);

CSS:

由于

fadeIn（）

和

fadeOut（）

会从DOM中删除元素，因此速度较慢，并且由于

float:left

会导致

.middle

和

.right

移动一次

。left

或

。middle

已淡出。

---

---

应该考虑到，任何一种方法（由于JS

setTimeout

或

setInterval

）都可能会出现时间错误。对于某些用途，（如ajax加载程序图标所示），动画gif可能比尝试为多个较小的图像设置动画要好。

CSS转换在这里比jQuery

.animate（）更好。

。你能做一把小提琴吗？需要它跨浏览器兼容，而不仅仅是现代浏览器。将在2分钟内提供一个JSFIDLE。Thanks@Mooseman当前位置我贴出了答案。如果你有任何问题，请告诉我。你绝对是冠军！看起来不可思议！！：）如果您让箭头停留一两分钟，然后观察它们，您会注意到它们开始出错：/I正在使用您的JQuery版本。有办法吗？

$(".left").addClass('show');
setTimeout(function(){
    $(".middle").addClass('show');
}, 500);
setTimeout(function(){
    $(".right").addClass('show');
}, 1000);

function animate() {
    $('.left').fadeTo(500, 1).delay(500).fadeTo(500, 0);
    $('.middle').delay(250).fadeTo(500, 1).delay(500).fadeTo(500, 0);
    $('.right').delay(500).fadeTo(500, 1).delay(500).fadeTo(500, 0);
}
setInterval(animate, 2000);

#arrows{
    width:100%;
    height:100px;
    position:absolute;
    top:220px;
    left:300px
}
#arrows .arrow{
    background:url(http://i.stack.imgur.com/xRwtw.png) no-repeat;
    height:49px;
    width:40px;
    float:left;
    opacity: 0;
}