1

何度もチェックしましたが、jQueryが機能しない理由がわかりません。jsfiddleで動作します！

html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
</head>
<body>
<div id="menu">

</div>
</body>
</html>

css：

#menu{
    width:15px;
    height:200px;
    background:red; 
}

jquery：

$('#menu').hover(function(){
     $("#menu").stop().animate({width : "300px"});
});
4

3 に答える 3

6

問題はここにあるようです：

<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

あなたのanimate.jsはjqueryがロードされる前に行きます

于 2013-02-27T00:16:33.687 に答える
4

jqueryコードをラップするか$(function () {})、（推奨）コードをの直前に移動する必要があります</body>。

于 2013-02-27T00:14:52.473 に答える
2

他の答えはうまくいかなかったので、私は提案を突き刺すつもりです。

イベントリスナーを追加する要素がまだ利用できない場所でJavaScriptを初期化していると思います。これがこの問題の解決策です。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Josue Espinosa</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="animate.js"></script>
</head>
<body>
    <div id="menu">
    </div>
    <script type="text/javascript">
        $('#menu').hover(function () {
            $("#menu").stop().animate({ width: "300px" });
        });
    </script>
</body>
</html>

この例では、JavaScriptはリスナーを追加する要素のすぐ下にあるため、DOMで使用できることが保証されています。

または、ドキュメントの準備ができた後に起動するイベントの周りにJSをラップすることもできます。次に例を示します。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Josue Espinosa</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="animate.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#menu').hover(function () {
                $("#menu").stop().animate({ width: "300px" });
            });
        });
    </script>
</head>
<body>
    <div id="menu">
    </div>
</body>
</html>

JavaScript要素のシーケンスに注意することも重要です。

于 2013-02-27T00:25:09.027 に答える