Jquery - 애니메이션 동안 애니메이션 깜박임

Question

그냥 간단한 jquery 애니메이션으로 간단한 메뉴를 만들고있어.

그러나 버튼 위로 마우스를 가져 가면 span 요소가 wierd로 작동합니다. 나는 많은 변화를 시도했지만 성공하지는 못했다. 상자의 크기가 변경되는 동안 스팬이 움직이지 않게하고 싶습니다.

누구든지 도움을 주시면 매우 감사하겠습니다.

감사합니다.

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/

,174,

다음은 업데이트 된 버전입니다. 스팬이 포함 된 a 요소의 위치를 ​​변경했다면 스팬이 본질적으로 a 요소와 함께 이동한다는 것을 의미합니다.

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