Question

当用户使用鼠标悬停时，我正在使用缓动插件“摇动”我的锚标记。如果我将它附加到<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)而不是$(a.shake)。在任何情况下都没有任何问题。

Answer 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>

我测试了它并且它有效！

JQuery动画无法处理锚标记

1 个答案: