用正确的延迟制作箭头动画？

Question

我有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);

任何调整都可以让它看起来像正确的延迟一样吗？

编辑：在此处http://jsfiddle.net/Jvn4F/

Answer 1

此解决方案使用CSS3关键帧：http://jsfiddle.net/Jvn4F/2/

CSS：

@-webkit-keyframes animate {
 0%{
   opacity: 0;
 }
40%{
   opacity: 0;
}
100%{
   opacity: 1;
 }
}
#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;
}
#arrows .arrow.show{
    -webkit-animation-name: animate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}

JS：

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

<小时/> 此解决方案使用jQuery进行动画制作：http://jsfiddle.net/Jvn4F/3/

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：

#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;
}

由于fadeIn()和fadeOut()从DOM中移除了该元素，因此速度较慢，并且由于float:left导致.middle和.right移位一次{ {1}}或.left已淡出。

<小时/> 应该考虑到任何一种方法（因为JS .middle或setTimeout）都会被错误地定时。对于某些用途（如ajax加载器图标所示），动画gif可能比尝试为多个较小的图像设置动画更好。