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

});
});

Answer 1

试试这个脚本

 $(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 for it http://jsfiddle.net/wmMpN/

jQuery动画增长和缩小尺寸问题

1 个答案: