Modification Carrousel - Fonction .hover sur div .title problème

Bonjour,

Tout d'abords je suis débutant en programmation Javascript et ce site m'est bien utile, merci.

Cependant j'ai un problème et j'ai passé une journée entière à tenter diverse solutions et recherches sur internet sans résultat.

Je vous explique le problème :

J'ai modifier le script pour qu'il y ai un effet de roll-over avec animation sur la div (.title) qui contient le texte associés à

l'image. Elle contient diverse information (nom, auteur, description, etc...) A l'état initial elle n'affiche qu'une partie

limitée de la div (nom, auteur), et lorsque la souris passe dessus elle se déplace vers le haut pour afficher tout son contenu.

J'ai pour cela utilisé .hover() qui fonctionne plutôt bien à l'exception du fait qu'une fois passé à la div supérieure contenant

l'image et le texte associé, l'effet n'est plus présent pour les div 'inférieures' cependant pour les div avec un 'numéro

supérieur' l'effet est fonctionnel. Au final, lorsque toutes les div sont passées, l'effet n'est présent uniquement que sur la

dernière div.

Pourriez vous m'indiquer une piste pour résoudre ce problème? D'avance merci.

Voici le code de mon fichier carrousel.js

// JavaScript Document

var carrousel = {

nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
    timer : null,

init : function (elem){

    this.nbSlide = elem.find(".slide").length;

    // Créer la pagination
    elem.append('<div class="nav_slide"></div>');
    for(var i=1; i<=this.nbSlide;i++){
      elem.find(".nav_slide").append('<span>'+i+'</span>');
    }
    elem.find(".nav_slide span").click(function(){carrousel.gotoSlide($(this).text());})
     // alert(this.elem);

    // Initialisation du Slide

    this.elem = elem;
    elem.find(".slide").hide();
    elem.find(".slide:first").show();
    this.elemCurrent = elem.find(".slide:first");
            var titleHeight = this.elemCurrent.find(".title").height();
            this.elemCurrent.find(" .title:first").css("bottom", -titleHeight+50);
            this.elem.find(".nav_slide span:first").addClass("active");

            // On crée le timer

            carrousel.play();
            // Stop quand on passe dessus
            elem.mouseover(carrousel.stop);
            elem.mouseout(carrousel.play);

},

gotoSlide : function(num){
        if(num==this.nbCurrent) {return false;}
   /* this.elemCurrent.fadeOut();
        this.elem.find("#slide"+num).fadeIn();*/

        this.elemCurrent.find(".visu").fadeOut();
        this.elem.find("#slide"+num).show();
        this.elem.find("#slide"+num+" .visu").hide().fadeIn();
        var titleHeight = this.elemCurrent.find(".title").height();
        this.elemCurrent.find(" .title").animate({"bottom": -titleHeight-10},500);
        this.elem.find("#slide"+num+" .title").css("bottom",-titleHeight-10).animate({"bottom": -221},500);
        this.elem.find(".nav_slide span").removeClass("active");
        this.elem.find(".nav_slide span:eq("+(num-1)+")").addClass("active");
        this.nbCurrent = num;
        this.elemCurrent = this.elem.find("#slide"+num);
},

    next : function(){
        var num = this.nbCurrent+1;
        if(num>this.nbSlide){
            num = 1;
        }
        this.gotoSlide(num);
    },

    prev : function(){
        var num = this.nbCurrent-1;
        if(num<1){
            num = this.nbSlide;
        }
        this.gotoSlide(num);
    },

    stop : function(){
        window.clearInterval(carrousel.timer);
        carrousel.moreInfo();

    },

    play : function(){
        window.clearInterval(carrousel.timer);
        carrousel.timer = window.setInterval("carrousel.next()",5000);
    },

    moreInfo : function(){

       /*  $(" .title").mouseover( function(){carrousel.elemCurrent.find(" .title").css("bottom",-221).stop().animate({"bottom": 0},500)});
        $(" .title").mouseout( function(){carrousel.elemCurrent.find(" .title").css("bottom",0).stop().animate({"bottom": -221},1000)});
        */
         var num = this.nbCurrent;

          this.elem.find("#slide"+num+" .title").hover(

                function(){
                    $(this).stop();
                    $(this).animate({"bottom": 0},500);
                },

                function(){
                    $(this).stop();
                    $(this).animate({"bottom": -221},500);
                }

            );

       }

}

$(function(){
carrousel.init($("#carrousel"));

});