jquery动画 -- 1.加载指示器

简介:   该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结,有兴趣的朋友可以去看原版书籍。   动画效果对于丰富网站的交互体验起到了不可或缺的作用,他可以让你的站点更酷,更吸引人。

  该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结,有兴趣的朋友可以去看原版书籍。

  动画效果对于丰富网站的交互体验起到了不可或缺的作用,他可以让你的站点更酷,更吸引人。

 

什么时候使用动画:

  1.当显示或隐藏页面、弹出框或内容区域的时候;

  2.当一些内容从页面的一个地方移动到其他地方的时候;

  3.当页面中的一些内容,应用户的操作而产生状态改变的时候;

  4.当一些内容在几种状态间转变的时候;

  5.引导用户去执行某些操作,或者引起他们对某些很重要信息注意的时候。

 

什么时候不应使用动画:

  1.当某些操作是需要用户频繁重复操作的时候;

  2.当设备无法充分显示动画效果的时候(也就是说该动画会占用计算机的很多资源,会影响到性能);

  3.即时操作。

 

  当然这些规定都不是绝对的,你需要根据你的实际情况来决定是否使用动画。下面是一些checklist(验证列表),只要满足下面几条选项,你的动画就是有价值的。

  1.动画是否适合你的目标客户;

  2.动画是否实用;

  3.动画是否增强了用户体验;

  4.动画是否以合适的速度运行。

 

  下面我们开始我们的第一个例子,创建一个动画加载指示器。

  我直接把源码贴出来,上面有注释。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //创建loader div对象
            //这里使用jQueryjQuery(html,[ownerDocument])方法,不懂得朋友去看下api
            var loader = $("<div></div>", {
                id: 'loader'
            }).css('display', 'none');
            //创建显示条
            var bar = $('<span></span>').css('opacity', 0.2);
            //时间间隔对象
            var loadingInterval = null;

            //创建三个显示条,并添加到loader对象中
            for (var i = 0; i < 3; i++) {
                bar.clone()//使用clone的可以提高性能,不用每次都去重新创建对象,clone比创建来的快
                   .addClass('bar-' + i).appendTo(loader);
            }
            //将loader添加到go按钮后面
            loader.insertAfter('#go');

            function runLoader() {
                //获取三个显示条
                var firstBar = loader.children(':first'),
                secondBar = loader.children().eq(1),
                thirdBar = loader.children(':last');

                //分别对三个显示条执行动画效果
                //总的效果就是依次让三个显示条,透明度变为1,再变为0.2
                firstBar.fadeTo('fast', 1, function () {
                    firstBar.fadeTo('fast', 0.2, function () {
                        secondBar.fadeTo('fast', 1, function () {
                            secondBar.fadeTo('fast', 0.2, function () {
                                thirdBar.fadeTo('fast', 1, function () {
                                    thirdBar.fadeTo('fast', 0.2)
                                });
                            });
                        });
                    });
                });
            };

            //对go按钮设置toggle事件
            $('#go').toggle(function () {
                //第一次点击的时候,显示loader,创建setInterval,每1200毫秒执行一次runLoader
                loader.show();
                runLoader();
                loadingInterval = setInterval(runLoader, 1200);
            }, function () {
                //再次点击的时候,隐藏loader,删除setInterval
                loader.hide();
                clearInterval(loadingInterval);
            });
        });
    </script>
    <style type="text/css">
        #loader
        {
            margin: 10px 0 0 36px;
        }
        #loader span
        {
            display: block;
            width: 6px;
            float: left;
            margin-right: 6px;
            border: 1px solid #336633;
            position: relative;
            background-color: #ccffcc;
        }
        #loader .bar-0
        {
            height: 15px;
            bottom: -20px;
        }
        #loader .bar-1
        {
            height: 25px;
            bottom: -10px;
        }
        #loader .bar-2
        {
            height: 35px;
            margin-right: 0;
        }
    </style>
</head>
<body>
    <input id="go" type="button" value="Initiate the action" />
</body>
</html>

  

  demo下载:jQuery.animation.loader.zip

adpics.aspx?source=kbh1983&sourcesuninfo
目录
相关文章
|
2月前
|
机器学习/深度学习 JavaScript
|
6月前
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
36 0
|
6月前
|
JavaScript
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
41 0
|
6月前
|
JavaScript
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
36 0
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
|
6月前
|
JavaScript
jQuery jquery.color.js 背景颜色支持动画
jQuery jquery.color.js 背景颜色支持动画
51 0
|
2月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
14 0
|
2月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
12 0
|
2月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
30 1
|
3月前
|
JavaScript 前端开发
jQuery 第五章(效果,滑动,动画,停止动画)
jQuery 第五章(效果,滑动,动画,停止动画)
38 0
|
4月前
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
31 0