Question

我自己正在学习JQuery，昨天晚上我偶然发现了一个疑问，从那时起就陷入困境。简单：我需要动画重复循环。但它没有用，你能帮帮我吗？我试过setInterval，它不能正常工作。小提琴是：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>

Answer 2

如果不重写整篇文章，您可以在最后一个嵌套.ready()回调函数中为.animate()提供一个名称并调用该函数

＆＃13;

$(function fn() {
  $(".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'
          });
          // call `fn` again here
          fn()
        });
      });
    });
  });
});

＆＃13;

.bckgrnd {
  width: 100vw;
  height: 100vh;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is the end of the head tag-->

<!--this is the start of the body tag-->

<body>
  <div class="bckgrnd w3-center w3-grey" style="position:absolute; z-index:-1">
    <img src="https://s1.postimg.org/a51sj109n/image1.jpg" class="w3-image img1" style="width:100vw; height:148vh; margin-bottom: -48vh; position: fixed; left: 0px; opacity: 0;">
    <img src="https://s1.postimg.org/57o7xwyaj/image2.jpg" class="w3-image img2" style="width:100vw; height:148vh; margin-top: -48vh; left: 0px; display:none; position:fixed; opacity: 0">
    <img src="https://s1.postimg.org/k4woyxbiz/image3.jpg" class="w3-image img3" style="width:100vw; height:148vh; margin-bottom: -48vh; left:0px; position:fixed; display:none; opacity: 0">
    <img src="https://s1.postimg.org/a8vlza5qz/image4.jpg" class="w3-image img4" style="width:100vw; height:148vh; margin-top: -48vh; left:0px; display:none;  position: fixed; opacity: 0">
  </div>
  <div class="w3-container w3-black w3-center" style="z-index:1000 !important">
    <h1>Hi how are you</h1>
  </div>

＆＃13;

循环或反复运行一堆JQuery函数

2 个答案: