jQuery - Chaining

Max
Javascript

Bonjour,
Je souhaiterais que mon animation jQuery passe à la suivante et ainsi de suite automatiquement. J'ai essayé quelques méthodes mais ca ne fonctionne pas. Si j'ai bien compris, c'est ce que l'on appelle du chaining. Quelqu'un peut m'aider avec mon code ?

Pour info, j'ai déjà un script qui me permet de faire un hover avec option animate. Ce que je voudrais faire c'est faire un animate opacity = 1 et ensuite opacity = 0 automatiquement pour mes items l'un à la suite de l'autre. Merci !!!

Voici comment ce présente le html:

<a href="#"> 
        <div class="bg_port" style="background-image:url(images/port_2.jpg); ">
        <span class="cache"></span>
        </div>
        </a>
       <a href="#"> 
       <div class="bg_port" style="background-image:url(images/port_3.jpg); ">
       <span class="cache"></span>
       </div>
        </a>

Voici comment se présente le code jQuery: 

jQuery(function($){
// CETTE PREMIÈRE PARTIE FONCTIONNE
$(".right_port a").hover(
function () {
    $(this).find('span.cache').stop().animate({opacity:0}, 1000);

  },
  function () {
    $(this).find('span.cache').stop().animate({opacity:1}, 1000);

  }
)
// C'EST A PARTIR D'ICI QUE CA NE FONCTIONNE PLUS ( ENCHAINEMENT AUTOMATIQUE AVEC TIMER)
$(".right_port a").ready(
function() {
$(this).find('span.cache').animate({opacity:0}, 500);
},
function () {
    $(this).find('span.cache').animate({opacity:1}, 500);

}); 

});

5 réponses

Max
Auteur
Réponse acceptée

Merci pour ton conseil -> Here is the solution !!!

Y a sans doute plus propre mais ca fonctionne... ;-)

$('document').ready(function() {
    var $imgs = $('.bg_port > span.cache'), current = 0;

    var nextImage = function() {
        if (current >= $imgs.length) current = 0;
        $imgs.eq(current).animate({opacity:0}, 2000);
        $imgs.eq(current++).animate({opacity:1}, 2000, function(){

                $(nextImage);
            });

    };
    nextImage();
});
Max
Auteur

Est-ce que je dois faire du DOM ? Comment m'y prendre? Merci !!!

Grafikart

Je ne comprend pas trop ton ready... :(

Max
Auteur

En fait j'ai raccourci le code html. J'ai 8 images différentes qui sont sensées faire un opacity 0 vers un opacity 1 l'une à la suite de l'autre. Donc dès que j'ai une anim qui se finit j'aimerais qu'elle enchaine sur la suivante automatiquement. Le ready (à mon sens) sert à dire que dès que cette partie (.right_port a) est chargée on lance début de l'enchainement. Les fonctions qui sont à l'intérieur ne sont pas à prendre en compte car elles considèrent une animation sur tous les éléments en même temps. Donc en gros pour résumer je voudrais juste une approche qui me permettrait d'effectuer cette double animation sur tous ces éléments l'un à la suite de l'autre. Merci à toi !!! :)

Grafikart

une boucle for et dedans tu incrémente une variable et tu utilise delay(XX) de jQuery pour mettre un délai sur les animations ?