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.

Aucune réponse