循環或反覆運行一堆JQuery函數

我自己在學習JQuery，昨天晚上我偶然發現了一個疑問並從此陷入困境。簡單：我需要動畫重複循環。但它不起作用，你能幫我解決嗎？我試過setInterval，它不工作。的小提琴是：https://jsfiddle.net/8v5feL9u/循環或反覆運行一堆JQuery函數

  $(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'}); 

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



//}); 



     });

太感謝你了。

來源

2017-06-04 Suporno Chaudhury

你可以用你的動畫在函數，然後在動畫的最嵌套部分的最後一個「動畫完成」回調中遞歸地調用該函數。

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>

來源

2017-06-04 00:45:30 Soviut

非常感謝。 –

，而無需重新編寫整片，可以爲過去的嵌套.animate()回調函數中提供的名稱，並調用傳遞給.ready()功能

$(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() 
 
     }); 
 
     }); 
 
    }); 
 
    }); 
 
});

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

<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>

來源

2017-06-04 00:42:47 guest271314

太謝謝你了。 –

循環或反覆運行一堆JQuery函數

回答

相關問題