Question

当用户用鼠标悬停时，我使用easy插件来摇动我的锚点标签。如果我将其附加到<；之外的任何元素，它都会工作；a>标签。我还尝试将行为附加到前面的<；李>，但它在那里也不起作用。我是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>

更新

我删除了颜色更改的第一个动画。我尝试将类移动到<；导航>和<；ul>元素。我还确保了对选择器的调用是$（.shawk），而不是$$（a.shake）。任何情况下都没有工作人员。

Answer 1

在你的css中，你有属性position:relative还是place: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（）

我也希望你的<；头部>标签


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


我测试了它，它奏效了！

友情链接