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

私が気づいた2つのこと：

  • セレクターが間違っています。li は #nav の直接の子要素ではないため、$('#nav li') にする必要があります。
  • 2 番目に、jquery UI JS を含める必要があります。JS ファイルがないとアニメーションが機能しないことを確認してください。
于 2013-07-24T04:24:44.720 に答える
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を追加しなかった次の画像も確認してください

ここに画像の説明を入力

于 2013-07-24T04:29:04.643 に答える
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関数を使いたいと思います。

まず、jQuery UI が JSFIDDLE にインポートされていません。

cdn url を使用してページにインポートします。

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

もう 1 つの問題は、セレクターが正しくないことです。「親」で指定された要素の「子」で指定されたすべての直接の子要素を選択する子セレクタ>です。. したがって、代わりに orを使用する必要があります。両方とも機能します。#nav > li#nav > ul > li#nav li

別の問題は、呼び出しの DOM 要素への参照で"this"ある変数の代わりに文字列を使用することです。詳細については、このトピックを参照してください。this

スクリプトは次のようになります。

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

更新されたJSFIDDLE

于 2013-07-24T04:24:55.500 に答える