jquery - サイズの問題を拡大および縮小するjQueryアニメーション

Question

私のコードで何か問題が発生しました。動作がおかしいです。私はコードを書きました。ホバーすると、タイトルの幅が増加し、コンテナの幅に収まります。私のコードでは機能していますが、ホバーインとホバーアウトを連続して行うと、タイトルの幅が大きくなり、デフォルトの幅に戻りません-私は混乱していることを知っているので、ここでコードを提供しています...plz help

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"});

});
});