2

サイトのメイン ナビゲーションでいくつかのアニメーションを作成しようとしています。これで、ナビゲーション メニュー項目がホバーされたときにバウンス効果を適用したいと思います。これは私のナビゲーションの構造です:

<div>
    <ul>
        <li><a>Home</a></li>
        <li><a>About</a></li>
        <li><a>Testimonials</a></li>
        <li><a>Contact Us</a></li>
   </ul>
</div>

次に、script.js ファイルに次のように記述します。

$('nav ul li a').hover(function() { //mouse in
    $(this).parent().effect("bounce", { times:3 }, 'normal')
});

ホバーすると各リスト項目がバウンスされますが、ホバーすると、リスト項目の配置が下にドロップされるように壊れるため、問題が発生しています(私のリスト項目はインラインであるはずです)。また、ホバリング中は常にバウンドし続けます。

私が望んでいたのは、バウンス効果を 1 回だけ実行し、リンクからマウスを離した後に再びバウンスするように制限できることです。また、バウンス時にナビゲーションのインライン表示を維持したいと考えていました。

これは可能ですか？私はいくつかのことを試しましたが、うまくいきません。どんな助けでも大歓迎です。前もって感謝します。

4

2 に答える 2

2

noah 1989が言ったようにfloat:left、鍵は次のとおりです。

    li {
        float:left;
    }

使用したjsは次のとおりです。

    $('li a').hover(function() { //mouse in
        $(this).parent().effect("bounce", { times:1 }, 'normal');
    }, function () { //mouse out
        $(this).parent().effect("bounce", { times:1 }, 'normal');
    });

hoverIn と hoverOut でバウンスを確認したい場合は、ここにフィドルがあります。

于 2012-02-03T02:07:06.643 に答える
0

賞金を提供した直後に、適切な解決策を提供するこの質問に対する答えを見つけました。

float:leftの代わりに使用しdisplay:inlineます。

于 2012-01-29T00:26:33.180 に答える