jQuery 动画效果代码分享
这里有新鲜出炉的 jQuery 示例, 程序狗速度看过来!
jQuery javascript 框架
jQuery 是一个兼容多浏览器的 javascript 框架, 核心理念是 write less,do more(写得更少, 做得更多)jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布, 吸引了来自世界各地的众多 JavaScript 高手加入, 由 Dave Methvin 率领团队进行开发
本文给大家分享一段关于 jquery 实现的动画效果, 代码简单易懂, 非常不错, 感兴趣的朋友参考下
一.显示隐藏
jQuery 中显示方法为:.show(), 隐藏方法为:.hide() 在无参数的时候, 只是硬性的显示内容和隐藏内容
$('.show').click(function() { // 设置个触发事件
$('#box').show(); // 显示
});
$('.hide').click(function() { // 设置个触发事件
$('#box').hide(); // 隐藏
});
在. show() 和. hide() 方法可以传递一个参数, 这个参数以毫秒 (1000 毫秒等于 1 秒钟) 来控 制速度并且里面富含了匀速变大变小, 以及透明度变换
$('.show').click(function(){
$('#box').show(1000); // 显示用了 1 秒
}); $('.hide').click(function(){
$('#box').hide(1000); // 隐藏用了 1 秒
});
除了直接使用毫秒来控制速度外, jQuery 还提供了三种预设速度参数字符串: slow normal 和 fast, 分别对应 600 毫秒 400 毫秒和 200 毫秒
$('#box').show('slow'); //600 毫秒
$('#box').show('normal'); //400 毫秒
$('#box').show('fast'); //200 毫秒
注意: 不管是传递毫秒数还是传递预设字符串, 如果不小心传递错误或者传递空字符串 那么它将采用默认值: 400 毫秒
使用. show() 和. hide() 的回调函数, 可以实现列队动画效果
(1) 使用函数名调用自身
$('.show').click(function(){
$('#box').show('slow',function showspan(){
$(this).next().show('slow',showspan);
});
})
(2) 使用 arguments.callee 匿名函数自调用
$('.show').click(function(){
$('#box').show('slow',function(){
$(this).next().show('slow',arguments.callee);
});
})
我们在使用. show() 和. hide() 的时候, 如果需要一个按钮切换操作, 需要进行一些条件判 断而 jQuery 提供给我们一个类似功能的独立方法:.toggle()
$('.toggle').click(function() {
$(this).toggle('slow');
});
二.滑动卷动 jQuery 提供了一组改变元素高度的方法:.slideUp().slideDown() 和. slideToggle() 顾名 思义, 向上收缩 (卷动) 和向下展开 (滑动)
$('.down').click(function() { // 向下滑动
$('#box').slideDown();
});
$('.up').click(function() { // 向上滑动
$('#box').slideUp();
});
$('.toggle').click(function() { // 切换
$('#box').slideToggle();
});
注意: 滑动卷动效果和显示隐藏效果一样, 具有相同的参数
三.淡入淡出
jQuery 提供了一组专门用于透明度变化的方法:.fadeIn() 和. fadeOut(), 分别表示淡入 淡出, 当然还有一个自动切换的方法:.fadeToggle()
$('.in').click(function() { // 淡入
$('#box').fadeIn('slow');
});
$('.out').click(function() { // 淡出
$('#box').fadeOut('slow');
});
$('.toggle').click(function() { // 切换
$('#box').fadeToggle();
});
上面三个透明度方法只能是从 0 到 100, 或者从 100 到 0, 如果我们想设置指定值就没 有办法了而 jQuery 为了解决这个问题提供了. fadeTo() 方法
$('.toggle').click(function() {
$('#box').fadeTo('slow', 0.33); //0.33 表示值为 33%
});
ps: 值数为 0 到 1, 对应百分比
四.自定义动画
jQuery 提供了几种简单常用的固定动画方面我们使用但有些时候, 这些简单动画无法 满足我们更加复杂的需求这个时候, jQuery 提供了一个. animate() 方法来创建我们的自定
义动画, 满足更多复杂多变的要求
$('.animate').click(function() {
$('#box').animate({
'width': '300px',
'fontSize': '50px',
'opacity': 0.5
});
});
注意: 一个 CSS 变化就是一个动画效果, 上面的例子中, 已经有四个 CSS 变化, 已经 实现了多重动画同步运动的效果
必传的参数只有一个, 就是一个键值对 CSS 变化样式的对象还有两个可选参数分别 为速度和回调函数
$('.animate').click(function(){
$('#box').animate({
'width':'500px',
'height':'400px',
},2000,function(){
alert('执行完毕');
});
});
到目前位置, 我们都是创建的固定位置不动的动画如果想要实现运动状态的位移动画, 那就必须使用自定义动画, 并且结合 CSS 的绝对定位功能
$('.animate').click(function(){
$('#box').animate({
'top':'300px', // 先必须设置 CSS 绝对定位
'left':'200px'
});
});
ps: 必须先在 css 里设置参照物, 绝对定位
自定义动画中, 每次开始运动都必须是初始位置或初始状态, 而有时我们想通过当前位 置或状态下再进行动画 jQuery 提供了自定义动画的累加累减功能
$('.animate').click(function() {
$('#box').animate({
left: '+=100px',
width: '+=100px',
height: '+=100px'
});
});
五.列队动画方法
之前我们已经可以实现列队动画了, 如果是同一个元素, 可以依次顺序或连缀调用如 果是不同元素, 可以使用回调函数但有时列队动画太多, 回调函数的可读性大大降低为 此, jQuery 提供了一组专门用于列队动画的方法
// 连缀无法实现按顺序列队
$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');
注意: 如果动画方法, 连缀可以实依次列队, 而. css() 方法不是动画方法, 会在一开始传入列队之前那么, 可以采用动画方法的回调函数来解决
// 使用回调函数, 强行将. css() 方法排队到. slideDown() 之后
$('#box').slideUp('slow').slideDown('slow',function({
$(this).css('background','orange');
});
但如果这样的话, 当列队动画繁多的时候, 可读性不但下降, 而原本的动画方法不够清 晰所以, 我们的想法是每个操作都是自己独立的方法那么 jQuery 提供了一个类似于回 调函数的方法:.queue()
// 使用. queue() 方法模拟动画方法跟随动画方法之后
$('#box').slideUp('slow').slideDown('slow').queue(function() {
$(this).css('background', 'orange');
});
现在, 我们想继续在. queue() 方法后面再增加一个隐藏动画, 这时发现居然无法实现 这是. queue() 特性导致的解决方法: jQuery 的. queue() 的回调函数可以 传递一个参数, 这个参数是 next 函数, 在结尾处调用这个 next() 方法即可再连缀执行列队动画
// 使用 next 参数来实现继续调用列队动画 $('#box').slideUp('slow').slideDown('slow').queue(function(next{
$(this).css('background', 'orange');
next();
}).hide('slow');
ps:.queue() 方法还有一个功能, 就是可以得到当前动画个列队的长度 (具体不做演示)
jQuery 还提供了一个清理列队的功能方法:.clearQueue() 把它放入一个列队的回调函 数或. queue() 方法里, 就可以把剩下为执行的列队给移除
// 清理动画列队
$('#box').slideDown('slow',function(){
$(this).clearQueue()
});
六.动画相关方法
很多时候需要停止正在运行中的动画, jQuery 为此提供了一个. stop() 方法它有两个可 选参数:.stop(clearQueue,gotoEnd);clearQueue 传递一个布尔值, 代表是否清空未执行完的 动画列队, gotoEnd 代表是否直接将正在执行的动画跳转到末状态
$('.animate').click(function(){
$('#box').animate({
'left':'300px' },1000);
$('#box').animate({
'top':'300px' },1000);
$('#box').animate({
'width':'300px' },1000);
$('#box').animate({
'height':'300px' },1000);
});
$('.stop').click(function(){
$('#box').stop(true,false);
});
// 注意: 第一个参数表示是否取消列队动画, 默认为 false 如果参数为 true, 当有列队动 画的时候, 会取消后面的列队动画第二参数表示是否到达当前动画结尾, 默认为 false 如果参数为 true, 则停止后立即到达末尾处可以自行复制体验
有时在执行动画或列队动画时, 需要在运动之前有延迟执行, jQuery 为此提供了. delay() 方法这个方法可以在动画之前设置延迟, 也可以在列队动画中间加上
// 开始延迟 1 秒钟, 中间延迟 1 秒
$('.animate').click(function(){
$('#box').delay(1000).animate({
'left':'300px' },1000);
$('#box').animate({
'bottom':'300px' },1000);
$('#box').delay(1000).animate({
'width':'300px' },1000);
$('#box').animate({
'height':'300px' },1000);
});
arguments.callee 在哪一个函数中运行, 它就代表哪一个函数 一般用在匿名函数中在匿名函数中有时会需要自己调用自己, 但是由于是匿名函数, 没有名字, 无名可调这时就可以用 arguments.callee 来代替匿名的函数
// 递归执行自我, 无限循环执行
$('#box').slideToggle('slow',function(){
$(this).slideToggle('slow',arguments.callee);
});
$.fx.off 属性可以关闭所有动画效果
$.fx.off=true; // 默认为 false
均理解完毕
来源: http://www.phperz.com/article/18/0131/359424.html