0

私は高くも低くも見て、いろいろなことを試しましたが、それは単にうまくいきません。私はこれらの2つのSO質問とそれらの応答（明らかに機能しました）を見ましたが、私には機能していないようです：

jqueryバウンス効果はリストのインラインアライメントを壊します

jQueryバウンスインプレース

ウェブサイトhttp://web.cs.dal.ca/~webucat/をクリックすると、リストアイテムがバウンスするようにしたい。これは私のHTMLです：

            <div id = "links">
                <ul>
                    <li><a href ="index.html" class="tab">Home</a><li>
                    <li><a href ="math.html" class="tab">Learn Math</a><li>
                    <li><a href ="geography.html" class="tab">Learn Geography</a><li>
                    <li><a href ="spelling.html" class="tab">Learn Spelling</a><li>
                    <li><a href ="music.html" class="tab">Learn Music</a><li>
                    <li><a href ="contact.html" class="tab">Contact Teacher</a><li>
                </ul>
            </div>

そして私のjQuery：

$('li a').hover(function () {
    $(this).effect("bounce", { times: 3 }, 300);
})​

しかし、それらは機能していないようです。

前の質問の1つで、リストアイテムをインラインで表示する代わりに左にフロートさせると言っていましたが、それでも問題は解決しませんでした。

HTMLのスクリプト参照と関係があるのは奇妙な感じがします。これらは正しく行われていますか？

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
    <script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="javascript/scripts.js"></script>

なぜそれが機能しないのか、私はここで本当に途方に暮れています。誰か助けてもらえますか？

編集：私はこのフィドルを作成しました：http：//jsfiddle.net/jfHNU/2/そしてそれはそこで機能し、私のコードがそれとどのように違うのかわかりません。

4

2 に答える 2

1

jQueryの後にjQuery-uiを含める必要があります。そうしないと、何も機能しません。

<script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>
于 2012-03-27T16:44:32.520 に答える
1

時である

$('li a').hover(function () {
    $(this).effect("bounce", { times: 3 }, 300);
})​

実行されていますか？domが完全にロードされる前に実行されている可能性があり、そのためliは存在しませんか？

編集：ページが完全に読み込まれる前に実行されているようです。スクリプトタグをページの下部に移動し、おそらくそれをdocument.readyでラップしてみてください。

$(document).ready(function() {
  $('li a').hover(function () {
    $(this).effect("bounce", { times: 3 }, 300);
  })​
});
于 2012-03-27T16:45:40.970 に答える