Question

所以我有一个带有6个按钮的简单网页。每个按钮都有自己的ID。我从Codecademy学到了一些JQuery代码，并尝试将其翻译成我的文件。我的问题是，为什么它不像在Codecademy编辑器中那样动画我的按钮？它应该增加我的按钮的高度，但它不是。这是我的代码。

＆＃13;

<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8" content="Legacy Gamers">
	<head>
		<title>Legacy Gamers</title>
		<link rel="stylesheet" type="text/css" href="C:\Users\Liam\Desktop\styles.css" media="screen" />
	</head>
	<body id="body1">
		<script type="text/javascript" src="C:\Users\Liam\Desktop\script.js"></script>
		<div><img src="http://www.w3schools.com/html/html5.gif" alt="Legacy Gamers"></div>
		<div id="parentbox">
			<div id="centerwrapper">
				<div class="boxdiv"><button id="box1" class="boxes">Help Me</button></div>
				<div class="boxdiv"><button id="box2" class="boxes">Help Me</button></div>
				<div class="boxdiv"><button id="box3" class="boxes">Help Me</button></div>
				<div class="boxdiv"><button id="box4" class="boxes">Help Me</button></div>
				<div class="boxdiv"><button id="box5" class="boxes">Help Me</button></div>
				<div class="boxdiv"><button id="box6" class="boxes">Help Me</button></div>
			</div>
		</div>
	</body>
</html>

＆＃13;

#body1 {
	background-image: url("https://i.ytimg.com/vi/XQaNEEotaSw/maxresdefault.jpg");
}

img {
	margin: auto;
	position: absolute;
	padding-top: 100px;
	top: 10;
	left: 0;
	bottom: 1;
	right: 0;
}

.boxes {
    display: inline-block;
	border: none;
    color: white;
    text-align: center;
    text-decoration: none;
	font-size: 16px;
	opacity: 0.8;
    filter: alpha(opacity=40);
}

.boxdiv {
	float: left;
    margin:1pt;
    width:72pt;
    height:72pt;
	padding-left: 30px;
	padding-bottom: 30px;
}

#parentbox {
	margin: auto;
	position: absolute;
	padding-top: 400px;
	top: 10;
	left: 0;
	bottom: 1;
	right: 0;
}

#centerwrapper {
	margin: auto;
    width: 302pt;
}

#box1 {
	height:100px;
    width:100px;
	background-color: #4dff4d; /* Green */
}

#box2 {
	height:100px;
    width:100px;
	background-color: #ff4d4d; /* Red */
}

#box3 {
	height:100px;
    width:100px;
	background-color: #4d4dff; /* Blue */
}

#box4 {
	height:100px;
    width:100px;
	background-color: #db4dff; /* Purple */
}

#box5 {
	height:100px;
    width:100px;
	background-color: #4dffff; /* Light Blue */
}

#box6 {
	height:100px;
    width:100px;
	background-color: #ff4da6; /* Pink */
}

＆＃13;

$(document).ready(function() {
   $("box1").mouseenter(function() {
       $(this).animate({
           height: '+=10px'
       });
   });
   $("#box1").mouseleave(function() {
       $(this).animate({
           height: '-=10px'
       }); 
   });
   $("#box1").click(function() {
       $(this).toggle(1000);
   }); 
});

＆＃13;

Answer 1

您导入了JQuery库吗？

例如，将其放入头部

<script type = "text/javascript"src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

为什么我的按钮没有动画？

1 个答案: