我按照教程创建了一个简单的网页。这里是HTML的一部分:为什么jQuery不工作?
$(document).ready(function() {
//when fucking mouse rolls over
$("li").mouseover(function() {
$(this).stop().animate({
height: '150px'
}, {
queue: false.duration: 600,
easing: 'easeOutBounce'
})
});
//when mouse went away
$("li").mouseout(function() {
$(this.stop().animate({
height: '50px'
}, {
queue: false,
duration: 600,
easing: 'easeOutBounce'
})
});
});
body {
font-family: "Lucida Grande", arial. sans-serif;
background: #f3f3f3;
}
ul {
margin: 0;
padding: 0;
}
li {
width: 100px;
height: 50px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
}
a {
color: #fff;
text-decoration: none;
}
p {
padding: 0px 5px;
}
.subtext {
padding-top: 15px;
}
.green {
background: #6AA63B;
}
.yellow {
background: yellow;
}
.red {
background: #D52100;
}
.purple {
background: #5122B4;
}
.blue {
background: #0292c0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Does this suit for title</title>
<link rel="stylesheet" href="animate-menu.css">
<script src="js/jquery.easing.1.3.js"></script>
<script src="njmt-menu.js"></script>
</head>
<body>
<p>Rollover a menu item to expand it</p>
<ul>
<li class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p><a href="#">about</a></p>
<p class="subtext">more info</p>
</li>
<li class="red">
<p><a href="#">contact</a></p>
<p class="subtext">get in touch</p>
</li>
<li class="blue">
<p><a href="#">SBMT</a></p>
<p class="subtext">Send us your Mary Jane</p>
</li>
<li class="purple">
<p><a href="#">TRMS</a></p>
<p class="subtext">LGLTY</p>
</li>
</ul>
</body>
</html>
Somewhy当我把鼠标放在 “红色”, “黄色” 等对象的面积,没有任何反应。所有到js文件的路径都是正确的。
您在查找输出时是否检查您的控制台...? –
@RohitSharma是的,但没有其他的 – NiHao92
@ 31piy感谢您的更新,这是得到像“你已经包括jquery两次”的答案。 –