Problème tuto Effet de survol

vegas2033
Javascript

Bonjour à tous,

Voilà j'ai bien suivi le tuto Javascript-jQuery concernant l'effet de survol mais voilà dès que la souris sors d'un bloc, l'effet d'opacité, le titre ainsi que la description du dernier bloc visité restent présent sur le bloc. J'ai essayé diverses solutions mais rien de concluant.

Voici le bout de code :

jQuery(function($){

var current = null; // Element actuellement survolé
var t = parseInt($('#content a:first span.title').css('top')); // Position du titre par rapport au top
var l = parseInt($('#content a:first span.descr').css('left')); // Poisition du contenu par rapport à la gauche

// Lorsque l'on survole un des lien
$('#content a').mouseover(function(){
// On vérifie que l'on ne suvole pas l'élément courant
if(current && $(this).index() != current.index()){
// On cache les infos de l'élément précédement sélectionné
current.find('span.bg').stop().fadeOut();
current.find('span.title').show().animate({
top : t - 25,
opacity : 0
});
current.find('span.descr').show().animate({
left : l - 50,
opacity : 0
});
}
// Si on survol l'éménent déja sélectionné on ne fait rien de plus
if(current && $(this).index() == current.index()){
return null;
}
// On anime le fond/titre et description
$(this).find('span.bg').hide().stop().fadeTo(500,0.7);
$(this).find('span.title').stop().css({
opacity : 0,
top : t + 25
}).animate({
opacity : 1,
top : t
});
$(this).find('span.descr').stop().css({
opacity : 0,
left : l + 50
}).animate({
opacity : 1,
left : l
});
// On modifie l'élément courant
current = $(this);
});
});

Merci de votre aide,
Greg

2 réponses

vegas2033
Auteur
Réponse acceptée

Petite rectification du précédent post que je viens de supprimer (j'avais oublié d'enlever le span description). Voici la solution :

$('#content a').mouseleave(function(){
       current.find('span.bg').stop().fadeOut();
       current.find('span.title').show().animate({
           top : t - 25,
           opacity : 0
       });
       current.find('span.descr').show().animate({
           top : t - 25,
           opacity : 0
       });
    });

Cordialement,
Greg

Nampo

Merci pour cette réponse !