Prb d'application du tuto : - Effet de survol jQuery , avec bootstrap

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.