Question

我检查了很多次，但我不知道为什么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"});
});

Answer 1

似乎问题在于：

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

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

Answer 2

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

Answer 3

由于其他答案对你来说似乎没有用，我打算采取一个建议。

我猜你在你正在添加事件监听器的元素尚未可用的位置初始化你的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元素的顺序也很重要。

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

3 个答案: