Bonjour, je début ds JavaScript et jQuery, j'ai suivit le tuto :
< Tutoriel jQuery - Effet de survol >
Et j'ai essayé de l'appliqué sur mon site monté avec bootstrap.
Mon probléme : l'effet voulu d'apres le tuto , ne marche que sur le
premier élément , et ne marche pas sur les suivants.
D'apres moi étant donné que mes éléments sont ds des Div différentes cette ligne de code marche pas :
if( current && $(this).index() == current.index() ){
return null;
}
En essayant de trouvé la solution j ai rajouté dans la ligne de code :
if( current && $(this).index() == current.index() ){
current.find('span.bg-surv').stop().fadeOut();
}
Mais du coup qd je quitte l'élément une partie du code ne se lance pas, cette partie :
current.find('span.titre-surv').show().animate({
top : t - 25,
opacity : 0
});
current.find('span.descr-surv').show().animate({
left : l - 50,
opacity : 0
});
Voici mon dom :
<section id="main4">
<div class="row">
<div class="col-md-3 col-sm-4 pad-mad">
<a href="depannage-rapid-de-votre-chauffage-a-marseille.html">
<span class="titre-surv">Dépannage rapid de votre chauffage à Marseille</span>
<span class="descr-surv">Après de longs mois sans l’utiliser, vous décidez d’allumer votre chauffage mais celui-ci ne semble pas fonctionner. Que [...]</span>
<span class="bg-surv"></span>
<img style="width:100%;" src="img/plombier-i.png" alt="Dépannage rapid de votre chauffage à Marseille" title="Dépannage rapid de votre chauffage à Marseille" />
</a>
</div>
<div class="col-md-3 col-sm-4 pad-mad">
<a href="intervention-et-depannage-d-urgence-a-marseille.html">
<span class="titre-surv">Intervention et dépannage d'urgence à Marseille</span>
<span class="descr-surv">Les pannes ou les défaillances de plomberie arrivent toujours sans prévenir. Aussi, il peut s’avérer compliqué de trouve [...] </span>
<span class="bg-surv"></span>
<img style="width:100%;" src="img/plombier-j.png" alt="Intervent et dépannage d'urgence à Marseille" title="Intervent et dépannage d'urgence à Marseille" />
</a>
</div>
</div><!-- fin row -->
....
Mon js :
var current = null;
var t = parseInt($('.pad-mad a:first span.titre-surv').css('top'));
var l = parseInt($('.pad-mad a:first span.descr-surv').css('left'));
$('.pad-mad a').mouseover(function(){
if( current && $(this).index() != current.index() ){
current.find('span.bg-surv').stop().fadeOut();
current.find('span.titre-surv').show().animate({
top : t - 25,
opacity : 0
});
current.find('span.descr-surv').show().animate({
left : l - 50,
opacity : 0
});
}
if( current && $(this).index() == current.index() ){
current.find('span.bg-surv').stop().fadeOut();
//return null;
}
$(this).find('span.bg-surv').hide().stop().fadeTo(500,0.7);
$(this).find('span.titre-surv').css({
opacity : 0,
top : t + 25
}).animate({
opacity : 1,
top : t
});
$(this).find('span.descr-surv').css({
opacity : 0,
left : l + 50
}).animate({
opacity : 1,
left : l
});
current = $(this);
});
Pouvez vous m'aider svp ?
Merci.