Jquery glisse gauche-droite plusieurs éléments puis à nouveau et boucle

J'essaie d'atteindre un certain type d'animation, mais je suis certain que j'ai tout faux.Jquery glisse gauche-droite plusieurs éléments puis à nouveau et boucle

Je vais commencer par ce que je suis en train de réaliser:

J'ai 3 éléments de balise H2 (comme une pile), premières diapositives H2 de gauche à droite avec FADEIN au début, puis le second H2 termine la même séquence suivie par la troisième, une fois que tous les trois éléments sont animés, ils glissent ensuite individuellement vers la droite et se décolorent, puis toute la séquence revient au début.

J'ai essayé à peu près cela avec ce qui suit, mais je suis certain qu'il existe une meilleure façon de le faire ... C'est une véritable tentative de débutants.

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

Toute aide ou conseil sur les plugins disponibles à cet effet serait grandement apprécié.

Source

2017-08-08 mobius2000

Juste un petit commentaire sur le css que vous utilisez. 'left' doit être spécifié quelles unités de mesure vous utilisez comme' left: 500px'. Je suis sûr que vous n'êtes pas censé utiliser 'opacity: 'hide''. Enfin, lisez la fonction d'animation; http://api.jquery.com/animate/ Il vous indique également comment déclencher une nouvelle fonction après la fin d'une animation dans ce fichier;). J'espère que cela aide. – RMo

Il y a peu de problèmes dans votre code, les div dans le dom sont déjà visibles, ainsi l'animation ne fonctionnera pas à la première utilisation. Le div devrait être caché initialement.

Utilisez cette css:

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

Et js comme ci-dessous:

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

Vous devez comprendre la diapositive et glisser la logique.

Source

2017-08-08 05:58:33

Jquery glisse gauche-droite plusieurs éléments puis à nouveau et boucle

Répondre

Questions connexes