无法在jQuery中制作动画框

时间:2015-03-07 19:28:58

标签: jquery html css animation jquery-animate

我试图用jQuery,CSS和HTML制作2个动画框,但代码不起作用。我在一个jQuery教程应用程序中创建了应用程序,它在应用程序上运行良好。当我在我的电脑上使用确切的代码时,它不起作用。我的代码出了什么问题?

继承我的代码:

    <!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>

感谢您帮助我!!

1 个答案:

答案 0 :(得分:0)

您需要在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>