0

ユーザーがマウスでホバリングしたときに、イージングプラグインを使用してアンカータグを「シェイク」しています。<a>タグ以外の要素に付ければ動作します。また、前の動作にアタッチしてみました<li>が、そこでも動作しませんでした。私はJQueryの正しい初心者です。それは特にアンカータグに関係しているに違いないと思いましたが、グーグルですばやく検索しても何も見つかりませんでした。おそらく私は何かを見落としていますか？これが私のコードです：

          <section id="content">
              <nav>
                    <ul>
                        <li id="selected">Home</li>
                        <li style="margin-left:35px;"><a href="about_alabama_bunker.html" title="Learn about Alabama Bunker" class="shake">About</a></li>
                        <li style="margin-left:5px;"><a href="services_offered.html" title="Services offered by Alabama Bunker" class="shake">Services</a></li>
                        <li style="margin-left:5px;"><a href="security_bunker_products.html" title="Product catalog" class="shake">Products</a></li>
                        <li style="margin-left:25px;"><a href="contact_alabama_bunker.html" title="Get in touch with our sales staff for inquiries, comments or suggestions" class="shake">Contact</a></li>
                    </ul>
              </nav>

          </section>

と私のJQuery：

<script type="text/javascript">
$(document).ready(function() {
$('a.shake').hover(function(event) {
    $(this)
        .css(
            {'color': 'ff0000' }, {
                duration: 'slow',
                easing: 'easeOutBounce'
            })
        .animate(
            { left: 25 }, {
                duration: 'fast',
                easing: 'easeOutBounce'
            })
        .animate(
            { left: 0 }, {
                duration: 'fast',
                easing: 'easeOutBounce'
            });
    });
});
</script>

アップデート

色変更のために最初のアニメーションを削除しました。クラスをそれぞれ<nav>と<ul>要素に移動してみました。また、セレクターの呼び出しが。$(.shake)ではなくtoであることを確認しました$(a.shake)。いかなる状況においても労働者はいません。

4

1 に答える 1

1

あなたのCSSで、あなたは属性を持っていますposition: relativeかposition: absolute？

nav ul li a.shake {
    text-decoration: none;
    display: block;
    position: relative;
    }


<script type="text/javascript">
    $(document).ready(function() {
    $('a.shake').hover(function(event) {
        $(this)
            .animate(
                { left: 200 }, {
                    duration: 'slow',
                    easing: 'easeOutBounce'
                })
            .animate(
                { left: 0 }, {
                    duration: 'slow',
                    easing: 'easeOutBounce'
                });
    });
});
  </script>

属性を追加しないと、。positionでも機能しませんevent.preventDefault()。

また、私はあなたがあなたの<head>タグにあることを願っています

<script src="yourPath/jquery.easing.1.3.js" type="text/javascript"></script>

仕事に必要です。

したがって、次のようにコードを編集します。

<section id="content">
              <nav>
                    <ul>
                        <li><a style="position: relative; margin-left:35px;" href="about_alabama_bunker.html" title="Learn about Alabama Bunker" class="shake">About</a></li>
                        <li><a style="position: relative; margin-left:5px;" href="services_offered.html" title="Services offered by Alabama Bunker" class="shake">Services</a></li>
                        <li><a style="position: relative; margin-left:5px;" href="security_bunker_products.html" title="Product catalog" class="shake">Products</a></li>
                        <li><a style="position: relative; margin-left:25px;" href="contact_alabama_bunker.html" title="Get in touch with our sales staff for inquiries, comments or suggestions" class="shake">Contact</a></li>
                    </ul>
              </nav>
          </section>

私はそれをテストしました、そしてそれは働きます！

于 2012-05-27T17:57:09.657 に答える