Jquery - 動畫文字閃爍

我只是用簡單的jQuery動畫製作一個簡單的菜單。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

來源

2013-08-23 svatos

請示一些代碼 –

爲什麼不用css做這個？ – Nitesh

對不起，我不知道正確的語法放在這裏jsFiddle代碼..它現在好了。 – svatos

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

這是一個更新的版本。您正在改變包含跨度的a元素的位置，這意味着跨度本身會隨a元素一起移動。

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

來源

2013-08-23 10:08:41 GaryDevenay

謝謝你加里！ :) – svatos

Jquery - 動畫文字閃爍

回答

相關問題