在 jQuery 中制作动画框时遇到问题
Trouble making animating boxes in jQuery
我正在尝试在 jQuery、CSS 和 HTML 中制作 2 个动画框,但代码不起作用。我在 jQuery 教程应用程序中制作了该应用程序,它在该应用程序上运行良好。当我在我的 PC 上使用确切的代码时,它不起作用。我的代码有什么问题?
这是我的代码:
<!doctype html>
<html>
<head>
<title>Testing Stuff</title>
</head>
<body>
<div class="blueBox"></div>
<div class="redBox"></div>
<style>
.blueBox, .redBox {
width: 100px;
height: 100px;
top: 20px;
position: absolute;
}
.redBox {
left: 20px;
background-color: red;
}
.blueBox {
left: 140px;
background-color: blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var $blueBox = $('div.blueBox');
var $redBox = $('div.redBox');
$blueBox.animate({left: "500px"}, 2000, function(){alert("Animation Completed!");
});
$redBox.animate({width: "0px", height: "0px", opacity: "0"}, 3000);
});
</script>
</body>
</html>
谢谢你帮助我!!
您需要 link 您 HTML 中的 jQuery 代码:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
最好在标签中完成。
如果你想要above v1.11.1, get the code link directly from the version through the jQuery download page。例如:
<script src="http://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript"></script>
我正在尝试在 jQuery、CSS 和 HTML 中制作 2 个动画框,但代码不起作用。我在 jQuery 教程应用程序中制作了该应用程序,它在该应用程序上运行良好。当我在我的 PC 上使用确切的代码时,它不起作用。我的代码有什么问题?
这是我的代码:
<!doctype html>
<html>
<head>
<title>Testing Stuff</title>
</head>
<body>
<div class="blueBox"></div>
<div class="redBox"></div>
<style>
.blueBox, .redBox {
width: 100px;
height: 100px;
top: 20px;
position: absolute;
}
.redBox {
left: 20px;
background-color: red;
}
.blueBox {
left: 140px;
background-color: blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var $blueBox = $('div.blueBox');
var $redBox = $('div.redBox');
$blueBox.animate({left: "500px"}, 2000, function(){alert("Animation Completed!");
});
$redBox.animate({width: "0px", height: "0px", opacity: "0"}, 3000);
});
</script>
</body>
</html>
谢谢你帮助我!!
您需要 link 您 HTML 中的 jQuery 代码:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
最好在标签中完成。
如果你想要above v1.11.1, get the code link directly from the version through the jQuery download page。例如:
<script src="http://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript"></script>