jquery delay（）関数

Question

私のページに5つのdivがあります。父のdiv "コンテナ"には4つのchild divが含まれています。イージングプラグインを使用して、各ページを順番に表示したい最後に "top：-200px"に戻してください。その後、それらをすべて無限ループとしてsetInterval（）に入れます。しかし、これは機能しません。誰かが私に理由を教えてもらえますか？ありがとう！

<div id="banner"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
    <div id="div3"></div> 
    <div id="div4"></div> 
</div> 
<style> 
#banner{ 
position: relative; 
width: 600px; 
height: 200px; 
overflow: hidden; 
} 
#div1{ 
width:600px; 
height:200px; 
background-color: #fc3; 
position: absolute; 
top: -200px; 
} 
#div2{ 
width:600px; 
height:200px; 
background-color: #cc3; 
position: absolute; 
top: -200px; 
} 
#div3{ 
width:600px; 
height:200px; 
background-color: #cf3; 
position: absolute; 
top: -200px; 
} 
#div4{ 
width:600px; 
height:200px; 
background-color: #ff3; 
position: absolute; 
top: -200px; 
} 
</style> 
<script src="jquery.js"></script> 
<script src="jquery.easing.1.3.js"></script> 
<script> 
$(document).ready(function(){ 
    setInterval(function(){ 
     $("#div1").animate(
      { top: 0 }, { 
       duration: "slow", 
       easing: "easeOutElastic" 
      }); 
     $("#div2").delay(2000).animate(
      { top: 0 }, { 
       duration: "slow", 
       easing: "easeOutElastic" 
      }); 
     $("#div3").delay(4000).animate(
      { top: 0 }, { 
       duration: "slow", 
       easing: "easeOutElastic" 
      }); 
     $("#div4").delay(6000).animate(
      { top: 0 }, { 
       duration: "slow", 
       easing: "easeOutElastic" 
      }); 
     $("#div1").delay(8000, function(){ 
      $(this).css("top", "-200px"); 
     }); 
     $("#div2").delay(8000, function(){ 
      $(this).css("top", "-200px"); 
     }); 
     $("#div3").delay(8000, function(){ 
      $(this).css("top", "-200px"); 
     }); 
     $("#div4").delay(8000, function(){ 
      $(this).css("top", "-200px"); 
     }); 
     }, 0); 
}); 
</script> 

Answer 1

「リセット」コードは、アニメーションの完全なコールバック内にありますか？

$("#div4").delay(6000).animate(
     { top: 0 }, { 
      duration: "slow", 
      easing: "easeOutElastic", 
      complete: function() { 
       $(this).delay(2000, function(){ 
        $(this).css("top", "-200px"); 
       }); 
      } 
     }); 

遅延時間を変更する必要があります。これは、最初のアニメーションが完了した時刻からのカウントであるためです。

Answer 2

完全なコールバックを使用して一連のアニメーションを行うことができます。ここをクリックしてください：