Bonjour à tous, j'ai suivi le tutoriel "Effet de survol" et j'ai un petit problème au niveau du jQuery étant donné que ma syntaxe HTML n'est pas la même.
/**CODE JQUERY/
$(function(){
var current = null;
var t = parseInt($('.thumbnails li a:first span.title').css('top'));
var l = parseInt($('.thumbnails li a:first span.desc').css('left'));
$('li.thumbnail').mouseover(function(){
if(current && $(this).index() != current.index())
{
current.find('span.bg').stop().fadeOut();
current.find('span.title').show().animate({
top : t - 25,
opacity : 0
});
current.find('span.desc').show().animate({
left : l - 50,
opacity : 0
});
}
if(current && $(this).index() == current.index())
{
return null;
}
$(this).find('span.bg').hide().stop().fadeTo(500,0.7);
$(this).find('span.title').css({
opacity: 0,
top : t + 25
}).animate({
opacity:1,
top : t
});
$(this).find('span.desc').css({
opacity: 0,
left : l + 250
}).animate({
opacity:1,
left : l
});
current = $(this);
});
});
/**CODE HTML/
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<span class="title">Mon titre</span>
<span class="desc">Ma description</span>
<span class="bg"></span>
<img src="image/pharmacie-small.jpg" width="300" height="200" />
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<span class="title">Mon titre</span>
<span class="desc">Ma description</span>
<span class="bg"></span>
<img src="image/irlorbital-small.jpg" width="300" height="200" />
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<span class="title">Mon titre</span>
<span class="desc">Ma description</span>
<span class="bg"></span>
<img src="image/nuway-small.jpg" width="300" height="200" />
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<span class="title">Mon titre</span>
<span class="desc">Ma description</span>
<span class="bg"></span>
<img src="image/portfolio-small.jpg" width="300" height="200" />
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<span class="title">Mon titre</span>
<span class="desc">Ma description</span>
<span class="bg"></span>
<img src="image/anciens-gb-small.jpg" width="300" height="200" />
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<span class="title">Mon titre</span>
<span class="desc">Ma description</span>
<span class="bg"></span>
<img src="image/eparfumerie-small.jpg" width="300" height="200" />
</a>
</li>
</ul>
Je pense que le problème ce situe au niveau de "if(current && $(this).index() != current.index())" mais je n'arrive vraiment pas à réglé le soucis après avoir passé quelques heures dessus, j'aurais besoin d'un peu d'aide..
Voilà, je remercie d'avance celui ou celle qui pourrait m'aider pour cela.