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