Question

我只是用一个简单的jquery动画制作一个简单的菜单。

但是当我将鼠标移到按钮上时，span元素会很奇怪。我尝试了很多变化，但没有成功。我希望在调整框大小时不要移动跨度。

如果有人帮忙，我会非常感激。

谢谢。

HTML：

<div id="wrapper">
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
<div>

的CSS：

#wrapper {
    width: 1024px;
    margin: 50px auto;
    background: #ccc;
    display: inline-block;
    text-align: center;
}
.button {
    font: normal 18px/1em 'Arial';
    float: left;
    display: block;
    margin: 10px;
    background: #fff;
    padding: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /*text-indent: -9999px;*/
    position: relative;
    border: 1px solid #999;
    margin-bottom: 50px;
}
.button span {
    text-align: center;
    position: relative;
    top: 80px;
    left: 0;
    padding: 40px 0;
    display: inline-block;
    width: 100%;
}

jquery的：

$(function(){
    $(".button").hover(
        function(){
            $(this).animate({'height':'+=20px', 'margin':'0px', 'width':'+=20px' }, 120);
        },
        function(){
             $(this).animate({'height':'-=20px', 'margin':'10px', 'width':'-=20px' }, 120);
        }
    );

});

jsfiddle

Answer 1

http://jsfiddle.net/sAW2c/364/

这是更新版本。您正在改变包含跨度的元素的位置，这意味着跨度本身会随着元素一起移动。

<ul id="wrapper">
    <li>
        <a href="#" class="button"></a>
        <span>Button</span>
    </li>
</ul>

Jquery - 文本在动画时闪烁

1 个答案: