继续在javascript中播放动画

Question

我想实现的东西像这样(在指示用户需要向下滚动的标题图片的底部衰落动画箭头).为此,我打算使用下面的代码.问题是动画只播放1倍,而我希望它能连续播放(以不会占用太多资源的方式播放).见http://jsfiddle.net/ZN3aD/

$('.icon').css('display', 'block');
$('.icon').animate({ opacity: 1 }, 0);
$('.icon').animate({ opacity: 0, top: "100px" }, 'slow');

Answer 1

我建议你使用CSS动画:

.icon {
    ...
    -webkit-animation: icon 1.2s infinite;
    animation: icon 1.2s infinite;
}

@-webkit-keyframes icon {
    from {
        opacity: 1;
        top: 80px;
    }
    to {
        opacity: 0;
        top: 100px;
    }
}
@keyframes icon {
    from {
        opacity: 1;
        top: 80px;
    }
    to {
        opacity: 0;
        top: 100px;
    }
}

它将在IE10 +中运行.

演示:http://jsfiddle.net/ZN3aD/6/

如果您仍然想要旧的浏览器支持,那么请看看James Donnelly的回答.或者您可以使用此代码段:

(function animate() {
    $('.icon').animate({ opacity: 1, top: 80 }, 0)
    .animate({ opacity: 0, top: 100 }, 'slow', animate);
})();

演示:http://jsfiddle.net/ZN3aD/8/