jQuery Animation pour augmenter et réduire la taille

Question

Une erreur s'est produite avec mon code, il se comporte bizarrement. J'ai écrit un code, Survoler une largeur de titre sera augmenté et adapter à la largeur du conteneur, avec mon code Il fonctionne, mais si vous passez la souris et planez en continu la largeur du titre va augmenter et ne reviendra pas à la largeur par défaut - Je sais confus, alors je donne le code ici ... plz aider

HTML

<div class="cat-boxes"> 
       <img src="img/3.jpg" /> 
       <div class="cat-boxes-desc"> 
        <span class="cat-title"><h3>culture and history</h3></span> 
        <p> 
         Festivals are true celebrations in God's Own Country 
        </p> 
        <a href="archive.html" class="articles">Articles</a> 
       </div> 
      </div><!--end cat-boxes--> 

CSS

.cat-boxes{ 
width:300px; 
overflow:hidden; 
position:relative; 
background:#ecebeb; 
float:left; 
margin-bottom:25px; 
} 
.cat-boxes img{ 
width:100%; 
} 
.cat-boxes-desc{ 
width:234px; 
height:115px; 
padding:6px 15px; 
position:relative; 
z-index:999; 
background:rgba(255, 255, 255, .5); 
margin: -25px auto 15px auto; 
} 
.cat-boxes-desc .cat-title{ 
display:inline-block; 
padding:0 15px; 
line-height:35px; 
position:absolute; 
top:-35px; 
right:0; 
background:#04a732; 
} 
.cat-boxes-desc .cat-title h3{ 
font-size:14px; 
font-family:Arial, Helvetica, sans-serif; 
line-height:35px; 
text-align:center; 
color:white; 
text-transform:uppercase; 
font-weight:normal; 
margin:0; 
} 
.cat-boxes-desc p{ 
font: 14px Arial, Verdana, Geneva, sans-serif; 
color:black; 
line-height:20px; 
text-transform:uppercase 
} 

jQuery

$(function(){ 
$('.cat-boxes').hover(function(){ 
$wd = $(this).find($('.cat-title')).width(); 

$(this).find($('.cat-title')).stop().animate({ 
top: '-35px', 
right: '-20px', 
width:'105%', 
'text-align':'center' 
}, {duration: "slow"}); 
}, function(){ 

$(this).find($('.cat-title')).stop().animate({ 
top: '-35px', 
right: '0px', 
width: $wd 
}, {duration: "slow"}); 

}); 
}); 

Answer 1

essayer ce script

$(function() { 
     $('.cat-boxes').mouseover(function() { 
      wd = $(this).find('.cat-title').width(); 

      $(this).find('.cat-title').stop().animate({ 
       top: '35px', 
       right: '-20px', 
       width: '105%', 
        'text-align': 'center' 
      }, 'slow'); 
     }).mouseout(function() { 

      $(this).find('.cat-title').stop().animate({ 
       top: '-35px', 
       right: '-40px', 
       width: wd 
      }, 'slow'); 

     }); 
    }); 

jsFiddle pour elle http://jsfiddle.net/wmMpN/