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

Par 1Zebre, il y a 12 ans

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, il y a 12 ans

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, il y a 12 ans

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, il y a 12 ans

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