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>元素中。我还确保对选择器的调用是 to$(.shake)而不是$(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 回答