html - Jquery - 动画时文本闪烁

Question

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

但是当我将鼠标移到按钮上时，span 元素表现得很奇怪。我尝试了很多变体，但没有成功。我希望 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%;
}

j查询:

$(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/

这是更新后的版本。您正在更改包含 span 的 a 元素的位置，这意味着 span 将固有地与 a 元素一起移动。

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