0

我想让一些列表项在悬停时反弹，但似乎无法弄清楚为什么它不起作用。这是 jsfiddle 上的编码链接：http: //jsfiddle.net/wrdweaver6/amhJK/

这是我在我的 html 头中使用的代码：

<head>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

     <script type="text/javascript">
       $(document).ready(function(){
           $('#nav > li').hover(function() {
              $(this).effect('bounce',{times: 2},'slow');
           });
       });
     </script>   
</head>

这是身体：

 <body>

  <div id="nav">

    <ul>
        <li>Word Lists</li>
        <li>Games</li>
        <li>Stories</li>
        <li>Parents</li>
        <li>Email</li>
    </ul>

  </div>
</body>
4

4 回答 4

2

试试下面的 Js fiddle

http://jsfiddle.net/arunberti/Dy6h7/

$(document).ready(function(){
  $('li a').hover(function() { 
     $(this).parent().effect("bounce", { times:3 }, 'normal');
   }, function () {
     $(this).parent().effect("bounce", { times:3 }, 'normal');
   });
});

另请检查您没有添加 Jquery UI 的以下图像

在此处输入图像描述

于 2013-07-24T04:29:04.643 回答
2

我注意到两件事：

  • 一个你的选择器是错误的，它应该只是 $('#nav li') 因为 li 不是 #nav 的直接子元素
  • 其次，您需要包含 jquery UI JS，很确定如果没有 JS 文件，动画将无法正常工作。
于 2013-07-24T04:24:44.720 回答
1

试试下面的代码：

$(document).ready(function(){
    $('#nav ul>li').click(function(){
        $(this).effect('bounce',{times:3},500);
    });    
})

请在此处找到工作演示： http : //jsfiddle.net/amhJK/9/

于 2013-07-24T04:26:36.553 回答
0

我猜你想使用effect()jQuery UI 功能。

首先，您的 JSFIDDLE 中没有导入 jQuery UI。

使用 cdn url 将其导入您的页面：

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

另一个问题是您的选择器不正确。>是选择由“父”指定的元素的“子”指定的所有直接子元素的子选择器。. 所以，而不是 你应该使用or ，两者都可以工作。#nav > li#nav > ul > li#nav li

另一个问题是您使用字符串"this"而不是变量this，它是对 invocation 的 DOM 元素的引用。有关详细信息，请参阅本主题。

你的脚本变成：

// on ready callback
$('#nav > ul > li').hover(function(){
    $(this).effect('bounce',{times:3},500);
});

更新了 JSFIDDLE

于 2013-07-24T04:24:55.500 回答