jQuery在jsfiddle中工作，但不在html文件中？

I checked many times, but I have no idea why the jQuery wont work. It works in jsfiddle!

我检查了很多次，但我不知道为什么jQuery不会工作。它适用于jsfiddle！

html:

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:

CSS：

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

jquery:

jQuery的：

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

3 个解决方案

#1

Since the other answers didn't seem to work out for you, I'm going to take a stab at a suggestion.

由于其他答案似乎不适合你，我将采取一个建议。

I'm guessing that you're initializing your JavaScript in a location where the element you're adding the event listener to isn't available yet. Here is a solution to this problem.

我猜你在一个你正在添加事件监听器的元素尚未可用的位置初始化你的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>

In this example, the JavaScript is immediately below the element you're adding the listener to, so it is guaranteed to be available in the DOM.

在此示例中，JavaScript紧跟在您添加侦听器的元素下方，因此保证在DOM中可用。

Alternatively, you can wrap your JS around an event to fire after the document is ready. Here is an example:

或者，您可以在文档准备好之后将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>

It is also important to note the sequence of the JavaScript elements.

注意JavaScript元素的顺序也很重要。

#2

It seems like problem lies here:

好像问题在于：

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

Your animate.js goes before jquery loads

你的animate.js在jquery加载之前去了

#3

You need to either wrap your jquery code in $(function () {}) or (preferred) move the code to just before </body>.

您需要在$（function（）{}）中包装jquery代码，或者（首选）将代码移到之前。

#1