Problème pratique sur le tutoriel "effet de survol" (débutant)

1Zebre
Javascript

Bonjour/soir et tout d'abord merci à l'auteur de ces vidéos pour ces tutos très ludiques et beaucoup mieux faits je trouve que sur les autres sites :)

Je suis un grand débutant et je bloque vers la fin du tutoriel suivant : http://www.youtube.com/watch?feature=player\_embedded&v=2wIdMo3Yxdw#!

Mon soucis se situe vraisemblablement au niveau de la variable "courante" ou de la fonction index() car avant que j'en arrive là rien ne m'avait vraiment perturbé :/

Voici mon code :

jQuery(function($){
    var courante = null;
    $('#contenu a').mouseover(function(){

        if(courante && $(this).index() == courante.index()){
        return null;
        }

    $(this).find('span.bg').hide().fadeTo(500,0.7);
    courante = $(this);
    });
    });

Le bug qui résulte de ce code est que l'animation fonctionne très bien... pour la première image. Après ça, plus rien, tout simplement.
Quelqu'un voit-il ou peut se situer le soucis ?

En vous remerciant par avance

1ZEBRE

3 réponses

Nonathy

Bonjour, je viens de regarder la vidéo pour recopier la source du fichier .js, je t'envoie donc la source du fichier .js

jQuery(function($){
    var current = null;
    var t = parseInt($("content a:first span.title").css('top'));
    var l = parseInt($("content a:first span.descr").css('left'));
    $('#content a').mouseover(function(){
        if(current && $(this).index() != current.index()){
            current.find('span.bg').stop().fadeOut();
            // Animation du titre et de la description quand on retire le curseur
            current.find('span.title').show().animate({
                top : t - 25,
                opacity : 0
            });
            current.find('span.descr').show().animate({
                left : t - 50,
                opacity : 0
            });
        }
        if(current && $(this).index() == current.index()){
            return null;
        }
        $(this).find('span.bg').hide().stop().fadeTo(500,0.7);

        // Animation du titre et de la description quand on met le curseur dessus
        $(this).find('span.title').css({
            opacity : 0,
            top : t + 25
        }).animate({
            opacity : 1,
            top : t
        });
        $(this).find('span.descr').css({
            opacity : 0,
            top : l + 50
        }).animate({
            opacity : 1,
            top : l
        });
        current = $(this);
    });

});

En espérant que cela t'aide. Selon moi il n'y avait pas d'erreurs en tant que tel dans ton code, mais il n'était pas complet.

1Zebre
Auteur

Salut et merci pour ta réponse. Après test il s'avère que le bug n'est pas résolu, ça ne change absolument rien. :/
J'ai beau chercher, je ne vois pas d'où l'erreur peut provenir :O

Nonathy

Peux-tu envoyer le code de ton index.html s'il te plait ?