Jquery - 动画时文本闪烁答案

【问题标题】：Jquery - Text Flickering while animateJquery - 动画时文本闪烁
【发布时间】：2013-08-23 18:29:11
【问题描述】：

我只是用一个简单的 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

【问题讨论】：

请显示一些代码
你为什么不用css来做这个？

标签： html css jquery-animate flicker

【解决方案1】：

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

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

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

【讨论】：