您的位置：首页 > Web前端 > JQuery

初学jQuery动画效果

2016-08-24 18:35 176 查看

学习了jQuery动画效果后，感觉animate方法的功能还是很强大的，当然，我接下来的这段代码也只算是浅尝辄止，后面会随着学习的深入会不断提高动画效果和代码质量，希望各位大神指点。

这段代码是在样例的基础上进行了修改，实现了四个方块的转动，并最终回到起始位置。这里面主要是用到了animate方法的队列功能，同时也要注意div块的position属性的设置，为fixed，absolute或relative。

接下来为完整源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").animate({top:'300px',opacity:'0.4'},"slow");

$("#div1").animate({left:'206px',opacity:'0.8'},"slow");

$("#div1").animate({top:'100px',opacity:'0.4'},"slow");

$("#div1").animate({left:'6px',opacity:'0.8'},"slow");

$("#div2").animate({left:'206px',opacity:'0.4'},"slow");

$("#div2").animate({top:'100px',opacity:'0.8'},"slow");

$("#div2").animate({left:'6px',opacity:'0.4'},"slow");

$("#div2").animate({top:'300px',opacity:'0.8'},"slow");

$("#div3").animate({top:'100px',opacity:'0.4'},"slow");

$("#div3").animate({left:'6px',opacity:'0.8'},"slow");

$("#div3").animate({top:'300px',opacity:'0.4'},"slow");

$("#div3").animate({left:'206px',opacity:'0.8'},"slow");

$("#div4").animate({left:'6px',opacity:'0.4'},"slow");

$("#div4").animate({top:'300px',opacity:'0.8'},"slow");

$("#div4").animate({left:'206px',opacity:'0.4'},"slow");

$("#div4").animate({top:'100px',opacity:'0.8'},"slow");

});

});

</script>

</head>

<body>

<button>开始动画</button>

<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。

如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>

<div id="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;top:100px;">

</div>
<div id="div2" style="background:#672821;height:100px;width:100px;position:absolute;top:300px">

</div>
<div id="div3" style="background:#bbb736;height:100px;width:100px;position:absolute;top:300px;left:206px;">

</div>
<div id="div4" style="background:#ffc629;height:100px;width:100px;position:absolute;left:206px;top:100px">

</div>

</body>

</html>

接下来为效果图：

四个方块按箭头方向同时转动，伴随透明效果，每个div块最终会回到起始位置，动画结束。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航