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(/image/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(/image/xRwtw.png) no-repeat;
    height:49px;
    width:40px;
    float:left;
    opacity: 0;
}

因为 fadeIn() 和 fadeOut() 从 DOM 中删除元素，所以速度较慢，并且由于 float:left 它会导致 .middle 和 .right 在 .left 或 .middle 淡出后切换。

<小时/> 应该考虑到任一方法(由于 JS setTimeout 或 setInterval)可能会变得不正确。对于某些用途(如使用 ajax 加载器图标所示)，动画 gif 可能比尝试为多个较小的图像设置动画更好。