Problème d'intégration du tuto jQuery : Effet de survol sous wordpress

Bonjour, je me présente PEREZ jérémy je crée des sites sous wordpress depuis maintenant 4 mois. Ma derniere réalisation est http://www.jeannoeperez.com. Je viens d’essayer d'intégrer le tuto jquery sous wordpress cependant j'ai un petit problème. L'animation des titres ne marche sur la premiere image cliqué, apres les autres images fonctionnent comme s'il n'y avait pas de js.

voici mon code :

Le html :

<?php get_header(); ?>
<div class="container_16">
    <div class="clear"></div>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="article-portfolio">
                    <a href="#">
               <span class="title"><h2><?php the_title(); ?></h2></span>
               <span class="descr"><?php the_content(); ?></span>
               <span class="bg"></span>
               <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'realisation-mini' ); } ?>
           </a>
                                              <div class="clear"></div>
                        </div>
    <?php endwhile; endif; ?>
    </div>
 <div class="clear"></div>
<?php get_footer(); ?>

Le css :

/*--------------------------------------contenue-realisation-------------------------*/
.article-portfolio{
    float: left;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 240px;
}
.article-portfolio a{ width:220px; height:220px; display:inline-block; position:relative; text-decoration:none; }
.article-portfolio a img{ border:none; width:220px; height:220px; }
.article-portfolio a span{ position:absolute; top:25px; left:25px; display:none;}
.article-portfolio a:hover span{ display:block;}
.article-portfolio span.title{ top:60px; color:#FFF; font-weight:bold; font-size:1.2em; z-index:2; }
.article-portfolio span.descr{ top:90px; color:#BABABA; font-size:0.9em; z-index:2; }
.article-portfolio span.bg{ top:0; left:0; height:220px; width:220px; background:#000; z-index:1; }

Et le Jquery :

jQuery(function($){

   var current = null; // Element actuellement survolé
   var t = parseInt($('.article-portfolio a:first span.title').css('top')); // Position du titre par rapport au top
   var l = parseInt($('.article-portfolio a:first span.descr').css('left')); // Poisition du contenu par rapport à la gauche

   // Lorsque l'on survole un des lien
   $('.article-portfolio a').mouseover(function(){
       // On vérifie que l'on ne suvole pas l'élément courant
       if(current && $(this).index() != current.index()){
           // On cache les infos de l'élément précédement sélectionné
           current.find('span.bg').stop().fadeOut();
           current.find('span.title').show().stop().animate({
               top : t - 25,
               opacity : 0
           });
           current.find('span.descr').show().stop().animate({
               left : l - 50,
               opacity : 0
           });
       }
       // Si on survol l'éménent déja sélectionné on ne fait rien de plus
       if(current && $(this).index() == current.index()){
           return null; 
       }
       // On anime le fond/titre et description
       $(this).find('span.bg').hide().stop().fadeTo(500,0.7);
       $(this).find('span.title').stop().css({
           opacity : 0,
           top : t + 25
       }).animate({
           opacity : 1,
           top : t
       });
       $(this).find('span.descr').stop().css({
           opacity : 0,
           left : l + 50
       }).animate({
           opacity : 1,
           left : l
       });
       // On modifie l'élément courant
       current = $(this); 
   });

});

Merci d'avance pour votre aide.