Question

我想让一些列表项在悬停时反弹，但似乎无法弄清楚为什么它不起作用。这是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>

Answer 1

我发现了两件事：

你的选择器错了，它应该是$（'＃nav li'），因为li不是#nav
其次，您需要包含jquery UI JS，非常确定没有JS文件，动画将无效。

Answer 2

尝试以下Js小提琴

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

enter image description here

Answer 3

尝试以下代码：

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

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

Answer 4

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

首先，jQuery UI未导入JSFIDDLE。

使用cdn url：

将其导入您的页面

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

另一个问题是您的选择器不正确。 >是child selector，选择＆＃34; child＆＃34;指定的所有直接子元素。由＆＃34; parent＆＃34;。指定的元素。因此，您应使用#nav > li或#nav > ul > li代替#nav li，而不是"this"。

另一个问题是您使用字符串this而不是变量// on ready callback $('#nav > ul > li').hover(function(){ $(this).effect('bounce',{times:3},500); });，它是对调用的DOM元素的引用。有关详细信息，请参阅this topic。

您的脚本变为：

{{1}}

Updated JSFIDDLE

弹跳效果不起作用

4 个答案: