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 回答