11527 sujets

JavaScript, DOM et API Web HTML5

Bonjour

J'essaye d'animer une liste au chargement d'une page.
Le soucis c'est que tout les li s'anime en même temps alors que j'aimerais qu'ils s'animent les uns a la suite des autres (et pourquoi pas quand le contenu est chargé).
Ne connaissant pas du tout la fonction qui permet de faire cela, si quelqu'un pouvait m'aidé cela serait sympa. Smiley biggrin


<ul id="projects">
   <li><img src="http://placekitten.com/460/300" alt="chat" /></li>
   <li><img src="http://placekitten.com/460/300" alt="chat" /></li>
   <li><img src="http://placekitten.com/460/300" alt="chat" /></li>
   <li><img src="http://placekitten.com/460/300" alt="chat" /></li>
</ul>



jQuery('#projects > li').each(function() {
	      jQuery(this)
	      .css({position: "relative"})
	      .animate({visibility: 'hidden', opacity: 0, left: "-300px"},0)
	      .animate({ visibility: 'visible', opacity: 1, left: "0"}, 600);
	});	
Comme ca ?
$(document).ready(function() {
jQuery('#projects > li').each(function() {
	      jQuery(this)
	      .css({position: "relative"})
	      .animate({visibility: 'hidden', opacity: 0, left: "-300px"},0)
	      .animate({ visibility: 'visible', opacity: 1, left: "0"}, 600);
	});	
});
Salut

Merci, mais le pb n'est pas la le "$(document).ready(function() {" qui lui est bien en place.
Le soucis vient du fait que mes li s'animent tous en même temps Smiley smile et non a la suite.
Modérateur
Bonjour, il n'existe pas de méthode "toute faite" en jquery pour faire cela, mais on peut le faire soi-même…

petit détail:

   .animate({visibility: 'hidden', opacity: 0, left: "-300px"},0)
    // peut se remplacer par:
   .css({visibility: 'hidden', opacity: 0, left: "-300px"})


Sinon animate accepte en paramètre un callback qui se déclenchera lorsque l'animation est terminée!

donc de la sorte:


$('#bidule').animate({
      left: '200px'
    },
  2000,
  function() {
    $('#bidule2').animate({
        left: '200px'
      },
      2000,
      function() {
        alert('2 animations finies');
      }
    );
  }
);

Bien sûr pour deux aniamtions suivies ça fonctionne mais pour plus ça va vite devenir illisible.

Reste alors la récurence, à adapter selon tes besoins:

(code non testé, développé avec la fameuse technique de la rache: )

function animeMoiCaNomDunePipe(ids) {
  var id;
  if (id = ids.shift() ) {
    $('#'+id).animate({
        left: '200px'
      },
      2000,
      function() {
        animeMoiCaNomDunePipe(ids);
      }
    );
  }
}

var mesAnimationsIds = array('bidule1','bidule2','bidule3');
animeMoiCaNomDunePipe(mesAnimationsIds);
Et une fonction récursive sur des éléments ayant la même classe ?

EDIT : Je me suis laissé avoir, le code de kustolovic c'est bien de la récursivité (et pas de la récurrence^^). Par contre, si le code est faux, le navigateur risque de planter sur une boucle infinie
Modifié par Naemesis (22 May 2012 - 14:40)
Modérateur
Naemesis a écrit :
EDIT : Je me suis laissé avoir, le code de kustolovic c'est bien de la récursivité (et pas de la récurrence^^).

Caramba, me suis fait avoir. J'ai eu fait (un bout) des études de maths, et en math on parle de récurrence pour… à peu près la même chose en fait. (récurrence, injection, récursivité, etc. )
Je vais me penché sur la fonction de kustolovic.
Mais par contre c'est quand même con de devoir leur indiqué un id acr si j'ai 50 li j'obtiens une variable à rallonge Smiley smile
@kustolovic : Ayant fait et des maths et de l'informatique, les deux a un niveau raisonnable, je comprend parfaitement de quoi tu parles.
Essaye ceci :

var i=0;
jQuery('#projects > li').each(function() {
    jQuery(this).delay(i).css({
        position: "relative"
    }).animate({
        visibility: 'hidden',
        opacity: 0,
        left: "-300px"
    }, 0).animate({
        visibility: 'visible',
        opacity: 1,
        left: "0"
    }, 600);
    i+=300;
});
Avec la solution de oken ça fonctionne mais les images apparaissent puis disparaissent.
Donc après motifs du code (ci-dessous) ça fonctionne.

        var i=0;
	jQuery('#projects > li').each(function() {
	jQuery(this).css({position: "relative", opacity: "0"})
	    jQuery(this).delay(i)
	    .animate({visibility: 'hidden',left: "-80px"}, 0)
	    .animate({visibility: 'visible',opacity: 1, left: "0"}, 300);
	    i+=200;
	});
Modérateur
Évidemment il y a la possibilité du delay/setTimeOut qui fonctionne facilement pour des durées équivalentes, ou qui comme là permet de relancer la nouvelle avant que la dernière animation ne soit complètement finie. ça me semble être une bonne méthode pour ce cas de figure.

Utiliser un système de queue est plus indiqué pour des animations suivies de durée différentes. La méthode de sélection que j'ai utilisée était adaptable, mais permet de gérer une suite qui n'est pas forcément atteignable par une seule requête css, ou dans un autre ordre.
Vla la fonction avec le fade des images une fois celles-ci loadées.


	var i=0;
	jQuery('#projects > li').each(function() {
	jQuery(this).css({position: "relative", opacity: "0"})
	    jQuery(this).delay(i)
	    	.animate({visibility: 'hidden',left: "-350px"}, 0)
	   		.animate({visibility: 'visible',opacity: 1, left: "0"}, 'fast');
	   	jQuery(this).find('img').hide()
	   	  .load(function(){
	   	    jQuery(this).fadeOut(0, function(){jQuery(this).fadeIn('fast')
	   	  })
	   	});
	    i+=155;
	});


Merci à tous pour votre aide.