javascript - 循环或重复运行一堆 JQuery 函数

Question

我正在自学 JQuery，昨天晚上我偶然发现了一个疑问，从那时起就陷入了困境。 简单:我需要动画循环重复。但它不起作用，你能帮帮我吗？我试过 setInterval，它不起作用。 fiddle 是:https://jsfiddle.net/8v5feL9u/

            $(document).ready(function(){



//window.setInterval(function(){

            $(".img1").css({display:''});
            $(".img1").animate({bottom: '300px', opacity: '1'}, 2000, function(){
                $(".img1").fadeOut(700);
                $(".img1").css({display:'none', bottom: '', opacity:'0'});
                $(".img2").css({display:''});
                $(".img2").animate({top: '300px', opacity: '1'}, 2000, function(){
                    $(".img2").fadeOut(700);
                    $(".img2").css({display:'none', top: '', opacity:'0'});
                    $(".img3").css({display:''});
                    $(".img3").animate({bottom: '300px', opacity: '1'}, 2000, function(){
                        $(".img3").fadeOut(700);
                        $(".img3").css({display:'none', bottom: '', opacity:'0'})
                        $(".img4").css({display:''});
                        $(".img4").animate({top: '300px', opacity: '1'}, 2000, function(){
                            $(".img4").fadeOut(700);
                            $(".img4").css({display:'none', top: '', opacity:'0'});

                        });
                    });
                });
            });



//});



        });

非常感谢。

Answer 1

您可以将动画包装在一个函数中，然后在动画最嵌套部分的最后一个“动画完成”回调中递归调用该函数。

function doAnimation() {
  $('.animate')
  .hide()
  .fadeIn(1000, function() {
    $(this).fadeOut(1000, function() {
      // recursively call our function in the inner-most animation callback
      doAnimation();
    });
  })
}

// start out initial loop
doAnimation();

.animate {
  padding: 30px;

  background: cornflowerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">animate me</div>