jquery - 在 jQuery 中制作动画框时遇到问题

标签 jquery html css animation jquery-animate

我试图在 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>

谢谢你帮助我!!

最佳答案

您需要在 HTML 中链接 jQuery 代码:

<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>

最好在标签中完成。

如果你想要above v1.11.1 ,通过jQuery download page直接从版本中获取代码链接.例如:

<script src="http://code.jquery.com/jquery-2.1.3.min.js"
    type="text/javascript"></script>

关于jquery - 在 jQuery 中制作动画框时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28919023/

相关文章:

jquery - 如何使用 jQuery 选择最接近的元素(不能是其父元素)?

jquery - Phonegap、cookie、跨域请求

asp.net - IE8 标准模式 JQuery 不逻辑

html - 子下拉菜单不在父项下居中

html - 同一导航栏中的多个列表

javascript - 从 asp.net Web 服务生成的 JSON 无效?

javascript - 表跨越太多列?

jquery - Bootstrap 下拉菜单。悬停时打开,但如何在点击时关闭?

jquery - 为什么 Negator 伪类在 jQuery 中不起作用?

css - 如何使用css使div填充剩余的垂直空间