jquery动画1.加载指示器_jquery
程序员文章站
2024-01-26 10:59:34
...
该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结,有兴趣的朋友可以去看原版书籍。
动画效果对于丰富网站的交互体验起到了不可或缺的作用,他可以让你的站点更酷,更吸引人。
什么时候使用动画:
1.当显示或隐藏页面、弹出框或内容区域的时候;
2.当一些内容从页面的一个地方移动到其他地方的时候;
3.当页面中的一些内容,应用户的操作而产生状态改变的时候;
4.当一些内容在几种状态间转变的时候;
5.引导用户去执行某些操作,或者引起他们对某些很重要信息注意的时候。
什么时候不应使用动画:
1.当某些操作是需要用户频繁重复操作的时候;
2.当设备无法充分显示动画效果的时候(也就是说该动画会占用计算机的很多资源,会影响到性能);
3.即时操作。
当然这些规定都不是绝对的,你需要根据你的实际情况来决定是否使用动画。下面是一些checklist(验证列表),只要满足下面几条选项,你的动画就是有价值的。
1.动画是否适合你的目标客户;
2.动画是否实用;
3.动画是否增强了用户体验;
4.动画是否以合适的速度运行。
下面我们开始我们的第一个例子,创建一个动画加载指示器,我直接把源码贴出来,上面有注释。
", {
id: 'loader'
}).css('display', 'none');
//创建显示条
var bar = $('').css('opacity', 0.2);
//时间间隔对象
var loadingInterval = null;
//创建三个显示条,并添加到loader对象中
for (var i = 0; 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);
});
});
动画效果对于丰富网站的交互体验起到了不可或缺的作用,他可以让你的站点更酷,更吸引人。
什么时候使用动画:
1.当显示或隐藏页面、弹出框或内容区域的时候;
2.当一些内容从页面的一个地方移动到其他地方的时候;
3.当页面中的一些内容,应用户的操作而产生状态改变的时候;
4.当一些内容在几种状态间转变的时候;
5.引导用户去执行某些操作,或者引起他们对某些很重要信息注意的时候。
什么时候不应使用动画:
1.当某些操作是需要用户频繁重复操作的时候;
2.当设备无法充分显示动画效果的时候(也就是说该动画会占用计算机的很多资源,会影响到性能);
3.即时操作。
当然这些规定都不是绝对的,你需要根据你的实际情况来决定是否使用动画。下面是一些checklist(验证列表),只要满足下面几条选项,你的动画就是有价值的。
1.动画是否适合你的目标客户;
2.动画是否实用;
3.动画是否增强了用户体验;
4.动画是否以合适的速度运行。
下面我们开始我们的第一个例子,创建一个动画加载指示器,我直接把源码贴出来,上面有注释。
复制代码 代码如下:
id: 'loader'
}).css('display', 'none');
//创建显示条
var bar = $('').css('opacity', 0.2);
//时间间隔对象
var loadingInterval = null;
//创建三个显示条,并添加到loader对象中
for (var i = 0; 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);
});
});
推荐阅读
-
jQuery-onload让第一次页面加载时图片是淡入方式显示_jquery
-
CSS3结合jQuery实现动画效果及回调函数的实例
-
JQuery基础总结四:动画篇
-
瀑布流布局并自动加载实现代码_jquery
-
webpack如何全局加载第三方插件,类似jQuery?(转)
-
加载列表时jquery获取ul中第一个li的属性
-
jquery动画2.元素坐标动画效果(创建一个图片走廊)_jquery
-
js网页特效:jQuery循环动画与获取组件尺寸的方法教程
-
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载_jquery
-
jQuery基于ajax实现带动画效果无刷新柱状图投票代码_jquery