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

Jquery 实现简洁的加载动画

2015-01-13 16:24 302 查看
本来css3来实现动画是一件简单高效的事情，但IE不支持CSS3的动画，着实让人头疼，所以，这里介绍用JQuery来实现动画的过程

首先，看看两个动画的效果：





在线查看

点击打开动画一

点击打开动画二

首先看我们的markup，很简单，如下

<div class="wrap">
<div class="rect"></div>
<div class="rect"></div>
<div class="rect"></div>
<div class="rect"></div>
<div class="rect"></div>
</div>


先从第一个动画讲起，后面的一个动画跟第一个动画原理一模一样。

这里的样式没什么东西，一个外层的container加上里面元素的样式，大概就这么点。

命名比较随便，不要介意。

.wrap {
position: fixed;
left: 50%;
top: 50%;
margin: -100px -50px;
height: 100px;
width: 100px;
background-color: white;
}

.rect {
position: absolute;
bottom: 0px;
width: 9px;
height: 5px;
border: none;
margin: 0px;
padding: 0px;
background-color: #9b59b6;
}


这里主要将外面的父类div放置在屏幕中间，将里面的小div设置好垂直距离跟宽高背景色，此时，5个小div都是重叠的。

关键就是js了，先上代码，记得先导入Jquery库哦！！

var rects = $(".wrap").children();
function loop(obj, delay) {
obj.delay(delay).animate({
height: "25px",
bottom: "-10px",
}, 500).animate({
height: "5px",
bottom: "0px",
}, 500, function () {
loop($(this), 1200);
});
}
function runRects() {
rects.each(function (i, item) {
item = $(item);
item.css("left", (i * 11) + "px");
loop(item, i * 300);
});
}
$(runRects());


先做的事情，就是将他们的距离设置好，形成5个单独的div。关键是动画部分。我做的是将每个小div的动作独立，之间互相不影响。所以其中的loop方法有两个参数，分别是要进行动画的Jquery对象，跟它开始动画的时间。大家可以注意到他们的开始时间是有差别的。

我们就拿其中某个div来说，此div先延迟需要的时间后，然后将高度增长为25px，原先是5px.但由于div是底部固定的（bottom:0px）,所以只是增长高度的话，不能形成上下都变长的效果。所以，我们将bottom属性同时减小到-10.效果就是上下各增长了10px。

这是动画的一部分，后面一部分就是回到一开始的样式，这就没什么好介绍了。

这是一个周期，如何继续下去呢，将loop方法再调一次，也就是递归就行了。其中delay参数传入此div下次开始动画的时间就行（应该是比较长的时间了）。只要一开始所有div的delay时间不同，就形成了向后传播的效果了。

第二个动画跟第一个动画原理一模一样，对照下面代码你就会发现了。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/2.0/jquery.min.js"></script>
<style>
.wrap {
position: fixed;
left: 50%;
top: 50%;
margin: -50px;
height: 100px;
width: 100px;
background-color: white;
border-radius: 10px;
}

.point {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
position: absolute;
margin: 0px;
padding: 0px;
border: none;
top: 15px;
}
</style>

</head>
<body>
<div class="cover">

<div class="wrap" >
<div class="point "></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</div>
<script>

function loop(obj, delay) {
obj.delay(delay).animate({
top: "0px"
}, 800)
.animate({ top: "15px" }, 800,
function () {
loop($(this), 0)
});
}
function runPoints() {
var a = $(".wrap").children()
a.each(function (i, item) {
item = $(item);
item.css("left", (i * 12 + 5) + "px");
switch (i) {
case 0: item.css("background-color", "#e218f8"); break;
case 1: item.css("background-color", "#fb7283"); break;
case 2: item.css("background-color", "#356afb"); break;
case 3: item.css("background-color", "#4cff00"); break;
case 4: item.css("background-color", "#fe1656"); break;
}
loop(item, i * 320);
});
}
$(runPoints());

</script>
</body>
</html>
大家可以按照这种框架写出很多种加载动画，我这个框架本身也很烂，见笑了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航