Jquery 实现简洁的加载动画

本来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>

大家可以按照这种框架写出很多种加载动画，我这个框架本身也很烂，见笑了。

Jquery 实现简洁的加载动画

猜你喜欢