0

シンプルな jquery アニメーションでシンプルなメニューを作成しています。

しかし、マウスをボタンの上に移動すると、スパン要素が奇妙な動作をします。私は多くのバリエーションを試しましたが、成功しませんでした。ボックスのサイズ変更中にスパンが動かないようにしたい。

誰かが助けてくれれば、私はとても感謝しています。

ありがとうございました。

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

4

1 に答える 1

0

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

これが更新されたバージョンです。スパンを含む a 要素の位置を変更していました。これは、スパンが本質的に a 要素とともに移動することを意味します。

<ul id="wrapper">
    <li>
        <a href="#" class="button"></a>
        <span>Button</span>
    </li>
</ul>
于 2013-08-23T10:08:41.977 に答える