所以我有一个带有 6 个按钮的简单网页。每个按钮都有自己的 ID。我有一些从 Codecademy 学到的 JQuery 代码，并试图将其翻译到我的文件中。我的问题是，为什么它不像在 Codecademy 编辑器中那样为我的按钮设置动画？它应该会增加我的按钮的高度，但事实并非如此。这是我的代码。
<!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>#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 */
}$(document).ready(function() {
$("box1").mouseenter(function() {
$(this).animate({
height: '+=10px'
});
});
$("#box1").mouseleave(function() {
$(this).animate({
height: '-=10px'
});
});
$("#box1").click(function() {
$(this).toggle(1000);
});
});最佳答案
您是否导入了 JQuery 库？
比如把这个放到head里
<code><script type = "text/javascript"src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script></code>
关于javascript - 为什么我的按钮没有动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34298064/