jquery - 重复动画X次

Question

如何更有效地编写此内容？

HTML

<div class="navigation-left">left</div>
<div class="navigation-right">right</div>

JS

$(document).ready(function(){
    var offs = 0,
        speed = 700;

    $('.navigation-left').animate({
        left: offs,
        opacity: 0
    }, speed)
    .animate({
        left: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        left: offs,
        opacity: 0
    }, speed)
    .animate({
        left: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        left: offs,
        opacity: 0
    }, speed)
    .animate({
        left: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        left: offs,
        opacity: 100
    }, speed);

    $('.navigation-right').animate({
        right: offs,
        opacity: 0
    }, speed)
    .animate({
        right: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        right: offs,
        opacity: 0
    }, speed)
    .animate({
        right: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        right: offs,
        opacity: 0
    }, speed)
    .animate({
        right: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        right: offs,
        opacity: 100
    }, speed);
});

​

​请参阅此处的 jsfiddle:http://jsfiddle.net/klawisz/nESMD/

Answer 1

使用 jQuery 和 setTimeout()

(function anim (times){
    $('.left').animate({left:70,   opacity:0},700).animate({left:0,  opacity:1},700);
    $('.right').animate({right:70, opacity:0},700).animate({right:0, opacity:1},700);
    if(--times) return setTimeout(anim.bind(this, times), 1400);
}( 5 )); // <--- pass initial N of times

.left, .right {position:absolute; width:50px; height:50px; background:red;}
.left {left:0;}
.right {right:0;}

<div class="left"></div>
<div class="right"></div>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>