Jquery slidein左右の複数の要素をもう一度ループして返します

特定の種類のアニメーションを実現しようとしていますが、間違いがあります。Jquery slidein左右の複数の要素をもう一度ループして返します

私は私が達成しようとしています何から始めましょう：

私は（スタックなど）3つのH2タグ要素を持って、最初のH2は、開始時にフェードインして左から右へのスライド、2番目のH2が完了します同じシーケンスの後に3番目の要素が続き、3つの要素がすべてアニメーション化されると、それぞれが右にスライドしてフェードアウトし、その後全体のシーケンスがループバックに戻ります。

私は大まかに次のように試しましたが、これを行う良い方法があると確信しています...これは真の初心者の試みです。

<body> 
    <div class="fade-right-1"> 
     <div class="container"> 
      <div class="photo-text"> 
       <span>All rights to NASA</span> 
      </div> 
     </div> 
    </div> 
    <div class="fade-right-2"> 
     <div class="container"> 
      <div class="photo-text"> 
       <span>All rights to NASA</span> 
      </div> 
     </div> 
    </div> 
    <div class="fade-right-3"> 
     <div class="container"> 
      <div class="photo-text"> 
       <span>All rights to NASA</span> 
      </div> 
     </div> 
    </div> 
</body> 
<script> 
$(document).ready(function() { 
    function animateDivers() { 
     $(".fade-right-1").animate({ 
      left: 200, 
      opacity: "show" 
     }, 1500); 
     $(".fade-right-2").delay(1000).animate({ 
      left: 200, 
      opacity: "show" 
     }, 1500); 
     $(".fade-right-3").delay(2000).animate({ 
      left: 200, 
      opacity: "show" 
     }, 1500); 

     $(".fade-right-1,.fade-right-2,.fade-right-3").delay(2000).animate({ 
      left: 500, 
      opacity: "hide" 
     }, 1500, animateDivers, 2500); 
    } 

    animateDivers(); 
}); 
</script>

このためそこにプラグイン上の任意のヘルプやアドバイスは感謝していただければ幸いです。

出典

2017-08-08 mobius2000

使用しているCSSに簡単にコメントしてください。 'left'はあなたが' left：500px'のように使う測定単位を指定する必要があります。私は 'opacity： 'hide'を使うべきではないと確信しています。 Fアニメーション機能を読み込みます。 http://api.jquery.com/animate/そこにアニメーションの完成後に新しい機能をトリガーする方法も説明します）。それが役に立てば幸い。 – RMo

コードに問題はほとんどありません。domのdivは既に表示されているため、アニメーションは初めて機能しません。 divは最初は非表示にする必要があります。

使用このCSS：以下のように

.fade-right-1, .fade-right-2, .fade-right-3{ 
    display:none 
}

とJS：

function animateDivers() { 
     $(".fade-right-1").animate({ 
      left: "200px", 
      opacity: "show", 
     }, 1500); 
     $(".fade-right-2").delay(1000).animate({ 
      left: 200, 
      opacity: "show" 
     }, 1500); 
     $(".fade-right-3").delay(2000).animate({ 
      left: 200, 
      opacity: "show" 
     }, 1500); 

     $(".fade-right-1").delay(3000).animate({ 
      left: "200px", 
      opacity: "hide", 
     }, 1500); 
     $(".fade-right-2").delay(4000).animate({ 
      left: 200, 
      opacity: "hide" 
     }, 1500); 
     $(".fade-right-3").delay(5000).animate({ 
      left: 200, 
      opacity: "hide" 
     }, 1500); 
    } 
    animateDivers(); 
    setInterval(animateDivers, 14000);

あなたはスライドを把握し、ロジックを引き出しする必要があります。

出典

2017-08-08 05:58:33

Jquery slidein左右の複数の要素をもう一度ループして返します

答えて

関連する問題