javascript - 以正确的延迟动画箭头？

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()andfadeOut()会从 DOM 中移除元素，所以它比较慢，并且因为float:left它会导致.middleand.right切换一次.left或.middle已经淡出。

---

应该考虑到任何一种方法（因为 JSsetTimeout或setInterval）都可能变得不正确。对于某些用途，（如 ajax 加载器图标所示）动画 gif 可能比尝试为多个较小的图像设置动画效果更好。