JQuery笔记二 :动画效果【蓝鸥HTML5出品】
2016-10-27 14:03
337 查看
JQuery笔记二 :动画效果【蓝鸥HTML5出品】
// 显示h1标签 $("h2").show(); ```
刚刚的显示和隐藏是不带任何效果的,看起来很生硬。添加效果,so easy
``` // 通过1s的时间隐藏h1标签 $("h1").hide(1000);
// 通过0.5s的时间显示h1标签 $("h2").show(500); ```
注意:括号中的时间单位是毫秒
$('#show').click(function () { $('h1').fadeIn(); }); fadeOut(); 淡出
$('#hidden').click(function () { $('h1').fadeOut('slow'); });
fadeToggle(): 和Toggle()相似,具有两种效果,就是淡入也是淡出
$('#show_hide').click(function () { $('h1').fadeToggle('fast'); });
fadeTo(): jQuery fadeTo()
方法允许渐变为给定的不透明度(值介于 0 与 1 之间)
// h1标签,慢速渐变为透明度为0.5 $('h1').fadeTo('slow', 0.5);
另外:
// 可以防止三个参数: 动画时间, 透明度结果, 动画执行结束的函数 $('h1').fadeTo('slow', 0.14, function () { // 当动画结束的时候,执行此函数(适用于其他函数) alert("动画结束"); });
// h1标签滑动展开 $('h1').slideDown();
slideUp(): 上滑动收起
// h1标签滑动收起 $('h1').slideUp();
slideToggle(): 兼具展开和收起的功能
// h1标签可以展开,可以收起 $('h1').slideToggle('slow');
4000
// 给h1标签添加动画,动画作用: // 参数1: 效果为 左间距、透明度; // 参数2: 动画时间2秒; // 参数3: 动画结束之后执行函数 $('h1').animate({marginLeft: '200px', opacity: '0.2'}, 2000, function () { alert("动画结束"); });
注意:可以用 animate() 方法来操作所有 CSS 属性吗?
是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心
jQuery 库中。
如果需要生成颜色动画,您需要从jquery.com下载Color
Animations插件。
animate() 函数可以使用相对值
``` // 在自身的基础上,高度增加100px $('h1').animate({height: '+=100px'});
// 当然,建议把代码格式写份这个样子,看起来更加清爽
$('h1').animate({ height: '+=100px' }); ```
animate() 函数可以使用预定值
预定值包括: show、hide、toggle
$('h1').animate({ height: 'toggle', margin: 'toggle', padding: 'toggle });
animate() 函数使用队列功能
队列功能就是让动画效果顺序执行
// 点击按钮的时候,是id为div1的元素进行动画效果 // 首先高度增加200像素,再宽度增加200像素,然后再高度减去200像素,最后宽度减去200像素 $('button').click(function () { var div = $('#div1'); div.animate({height: '+=200px'}); div.animate({width: '+=200px'});
div.animate({height: '-=200px'}); div.animate({width: '-=200px'}); });
// 函数语法 $(selector).stop(stopAll, goToEnd) // 参数1 stopAll:规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行 // 参数2 goToEnd:规定是否立即完成当前动画。默认是 false
代码展示:
``` // 点击id为flip的按钮,使id为panel的标签进行动画 $("#flip").click(function () { $("#panel").slideDown(5000); });
// 点击id为stop的按钮,使id为panel的动画效果停止 $("#stop").click(function () { $("#panel").stop(); }); ```
没有callback回调函数
// 如果这样编写,会在动画结束之前弹出警告框 // 如果希望动画结束后弹出框,需要使用callback函数 $("button").click(function(){ $("p").hide(1000); alert("动画结束"); });
使用callback回调函数
// 在hide函数中,第二个参数几位callback回到函数,当动画结束的时候,讲执行此函数 $("button").click(function () { $("p").hide("slow", function () { alert("动画结束"); }); });
注意:callback函数几乎适用于所有动画函数
Chaining 允许我们在一条语句中编写多个 jQuery 方法(在相同的元素上)
注意: 这样的话,浏览器就不必多次查找相同的元素
``` // 元素首先背景改变颜色,在执行收起动画,最后执行展开动画 $('#div1').css("backgroundColor", 'cyan').slideUp('slow').slideDown(2000);
// 当多个方法链接在一起的时候,可读性会降低。当然,我们可以这样写: $('#div1').css("backgroundColor", 'cyan') .slideUp('slow') .slideDown(2000); // jQuery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行 ```
【HTML5教程】微信小程序全方位深度解析CSDN学院观看地址:http://edu.csdn.NET/lecturer/992
隐藏和显示
``` // 隐藏h1标签 $("h1").hide();// 显示h1标签 $("h2").show(); ```
刚刚的显示和隐藏是不带任何效果的,看起来很生硬。添加效果,so easy
``` // 通过1s的时间隐藏h1标签 $("h1").hide(1000);
// 通过0.5s的时间显示h1标签 $("h2").show(500); ```
注意:括号中的时间单位是毫秒
toggle()
// 点击id为show_hide的按钮,可以进行隐藏和显示h1标签,动画效果时间为500毫秒 $('#show_hide').click(function () { $('h1').toggle(500); });淡入淡出
fadeIn(): 淡入$('#show').click(function () { $('h1').fadeIn(); }); fadeOut(); 淡出
$('#hidden').click(function () { $('h1').fadeOut('slow'); });
fadeToggle(): 和Toggle()相似,具有两种效果,就是淡入也是淡出
$('#show_hide').click(function () { $('h1').fadeToggle('fast'); });
fadeTo(): jQuery fadeTo()
方法允许渐变为给定的不透明度(值介于 0 与 1 之间)
// h1标签,慢速渐变为透明度为0.5 $('h1').fadeTo('slow', 0.5);
另外:
// 可以防止三个参数: 动画时间, 透明度结果, 动画执行结束的函数 $('h1').fadeTo('slow', 0.14, function () { // 当动画结束的时候,执行此函数(适用于其他函数) alert("动画结束"); });
滑动
slideDown(): 下滑动展开// h1标签滑动展开 $('h1').slideDown();
slideUp(): 上滑动收起
// h1标签滑动收起 $('h1').slideUp();
slideToggle(): 兼具展开和收起的功能
// h1标签可以展开,可以收起 $('h1').slideToggle('slow');
4000
动画
利用JQ提供的animate()函数,我们可以自定义动画效果// 给h1标签添加动画,动画作用: // 参数1: 效果为 左间距、透明度; // 参数2: 动画时间2秒; // 参数3: 动画结束之后执行函数 $('h1').animate({marginLeft: '200px', opacity: '0.2'}, 2000, function () { alert("动画结束"); });
注意:可以用 animate() 方法来操作所有 CSS 属性吗?
是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心
jQuery 库中。
如果需要生成颜色动画,您需要从jquery.com下载Color
Animations插件。
animate() 函数可以使用相对值
``` // 在自身的基础上,高度增加100px $('h1').animate({height: '+=100px'});
// 当然,建议把代码格式写份这个样子,看起来更加清爽
$('h1').animate({ height: '+=100px' }); ```
animate() 函数可以使用预定值
预定值包括: show、hide、toggle
$('h1').animate({ height: 'toggle', margin: 'toggle', padding: 'toggle });
animate() 函数使用队列功能
队列功能就是让动画效果顺序执行
// 点击按钮的时候,是id为div1的元素进行动画效果 // 首先高度增加200像素,再宽度增加200像素,然后再高度减去200像素,最后宽度减去200像素 $('button').click(function () { var div = $('#div1'); div.animate({height: '+=200px'}); div.animate({width: '+=200px'});
div.animate({height: '-=200px'}); div.animate({width: '-=200px'}); });
停止动画
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。// 函数语法 $(selector).stop(stopAll, goToEnd) // 参数1 stopAll:规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行 // 参数2 goToEnd:规定是否立即完成当前动画。默认是 false
代码展示:
``` // 点击id为flip的按钮,使id为panel的标签进行动画 $("#flip").click(function () { $("#panel").slideDown(5000); });
// 点击id为stop的按钮,使id为panel的动画效果停止 $("#stop").click(function () { $("#panel").stop(); }); ```
Callback
Callback 函数在当前动画 100% 完成之后执行没有callback回调函数
// 如果这样编写,会在动画结束之前弹出警告框 // 如果希望动画结束后弹出框,需要使用callback函数 $("button").click(function(){ $("p").hide(1000); alert("动画结束"); });
使用callback回调函数
// 在hide函数中,第二个参数几位callback回到函数,当动画结束的时候,讲执行此函数 $("button").click(function () { $("p").hide("slow", function () { alert("动画结束"); }); });
注意:callback函数几乎适用于所有动画函数
Chaining
通过 jQuery,可以把方法链接在一起写Chaining 允许我们在一条语句中编写多个 jQuery 方法(在相同的元素上)
注意: 这样的话,浏览器就不必多次查找相同的元素
``` // 元素首先背景改变颜色,在执行收起动画,最后执行展开动画 $('#div1').css("backgroundColor", 'cyan').slideUp('slow').slideDown(2000);
// 当多个方法链接在一起的时候,可读性会降低。当然,我们可以这样写: $('#div1').css("backgroundColor", 'cyan') .slideUp('slow') .slideDown(2000); // jQuery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行 ```
相关文章推荐
- JQuery笔记一 :选择器和事件【蓝鸥HTML5出品】
- JQuery笔记四 :遍历获取内容【蓝鸥HTML5出品】
- JQuery笔记二 :动画效果【蓝鸥HTML5出品】
- JQuery笔记一 :选择器和事件【蓝鸥HTML5出品】
- JQuery笔记三 :获取内容和属性【蓝鸥HTML5出品】
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- jQuery学习笔记10:动画效果
- 【jQuery】jQuery官方基本教程的学习笔记3-动画效果Effects
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- HTML——jquery学习笔记+实例+动画效果+表格处理
- React学习笔记:使用jquery实现动画效果淡入淡出
- jQuery学习笔记之jQuery动画效果
- JQuery学习笔记-JQuery的动画效果
- jQuery学习笔记之十一------动画效果
- jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- jQuery学习笔记之jQuery动画效果
- jquery动画效果学习笔记(8种效果)
- jquery动画效果学习笔记(8种效果)
- jQuery学习笔记之jQuery动画效果