jQuery动画特效实例教程
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery动画特效实例教程相关的知识，希望对你有一定的参考价值。
参考技术A 本文以实例形式详细讲述了jQuery动画特效的实现方法。分享给大家供大家参考之用。具体方法如下：1.自制折叠内容块
内容块如下：
<div
class="module">
<div
class="caption">
<span>标题</span>
<img
src="rollup.gif"
alt="rollup"
title="rolls
up
this
module"/>
</div>
<div
class="body">
近日，《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧，恒大统治力比上赛季下降了很多，恒大外援存在位置重叠的问题，客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武，恒大的惹不起不过尔尔，恒大失去了对其它球队压倒性的优势，能力下降是恒大霸主地位有所动摇的根源所在。
</div>
</div>
给img元素绑定点击事件。
$(function()
$('div.caption
img').click(function
()
//先找到img的父级元素，再找该父级元素的子元素
var
$body
=
$(this).closest('div.module').find('div.body');
if
($body.is(':hidden'))
$body.show();
else
$body.hide();
);
);
运行效果如下图所示：
切换元素的显示状态，还可以用toggle方法。
$(function()
$('div.caption
img').click(function
()
$(this).closest('div.module').find('div.body').toggle();
);
);
以上是没有动画效果的，有时候感觉会很唐突。实际上，show,hide,toggle方法都可以有动画效果。比如：
$(function()
$('div.caption
img').click(function
()
$(this).closest('div.module').find('div.body').toggle('slow');
);
);
又比如：
$(function()
$('div.caption
img').click(function
()
$(this).closest('div.module').find('div.body').toggle('slow',
function()
$(this).closest('div.module').toggleClass('rolledup',
$(this).is(':hidden'))
);
);
);
2.使元素淡入淡出
fadeIn(speed,
callback)
fadeOut(speed,
callback)
fadeTo(speed,
opacity,
callback)
3.上下滑动元素
slideDown(speed,
callback)
slideUp(speed,
callback)
slideToggle(speed,
callback)
4.停止动画
stop(clearQueue,
gotoEnd)
5.创建自定义动画
animate(properties,
duration,
easing,
callback)
$('.classname').animate(opacity:'toggle','slow')
如果写一个扩展函数。
$.fn.fadeToggle
=
function(speed)
return
this.animate(opacity:'toggle','slow');
6.自定义缩放动画
$('.classname').each(function()
$(this).animate(
width:
$(this).width()
*
2,
height:
$(this).height()
*
2
);
);
7.自定义掉落动画
$('.classname').each(function()
$(this)
.css("position","relative")
.animate(
opacity:
0,
top:
$(window).height()
-
$(this).height()
-
$(this).position().top
,'slow',function()
$(this).hide();
)
);
8.自定义消散动画
$('.classname').each(function()
var
position
=
$(this).position();
$(this)
.css(
position:
'absolute',
top:
position.top,
left:position.left
)
.animate(
opacity:
'hide',
width:
$(this).width()*5,
height:
$(this).height()*5
top:
position.top
-
($(this).height()
*
5
/
2),
left:
position.left
-
($(this).width()
*
5
/2)
,'normal');
);
9.队列中的动画
//动画插入队列
$('img').queue('chain',
function());
$('img').queue('chain',
function());
$('img').queue('chain',
function());
$('img').queue('chain',
function());
$('button').click(function()
$('img').dequeue('chain');
//删除队列中的动画
)
cleaeQueue(name)//删除所有未执行的队列中的动画
delay(duration,
name)//为队列中所有未执行的动画添加延迟
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。
jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效
5.1 jQuery动画特效说明
jQuery框架中为我们封装了众多的动画和特效方法，只需要调用对应的动画方法传递合适的参数，就能够方便的实现一些炫酷的效果，而且jQuery框架还支持自定义各种动画效果。
jQuery中的动画效果主要有以下方法
① 显示和隐藏动画② 展开和收起动画③ 淡入和淡出动画④ 自定义动画效果
5.2 显示和隐藏动画
jQuery框架中为我们提供了专门的方法来控制让标签显示或者是隐藏。标签的显示和隐藏在开发中相对来说是比较常见的操作，如果使用原生的JavaScript代码来控制标签的显示或者是隐藏，那么我们主要通过控制该标签的display属性值来实现。
jQuery中控制标签显示和隐藏的动画方法
① show() 控制让标签显示的动画方法② hide() 控制让标签隐藏的动画方法③ toggle()控制让标签显示|隐藏效果切换的动画方法
ex：以原生的方法来控制标签的显示或隐藏
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!--....--> 5 <style> 6 #demoID{ 7 width: 200px; 8 height: 50px; 9 background: red; 10 } 11 </style> 12 <script src="jquery-3.1.1.js"></script> 13 </head> 14 <body> 15 <div id="demoID"></div> 16 <script> 17 //控制标签显示或隐藏的方式(1) 18 //document.getElementById("demoID").style.display = "none"; 19 //document.getElementById("demoID").style.display = "block"; 20 //控制标签显示或隐藏的方式(2) 21 //$("#demoID").css("display","none"); 22 $("#demoID").css("display","block"); 23 </script> 24 </body> 25 </html>
显示和隐藏动画方法语法
$("selector").show(speed,callBack)$("selector").hide(speed,callBack)
参数说明：
第一个参数：可选的参数。speed表示执行动画的速度，该速度可以使用系统默认提供的值，也可以自己以数字的形式传入。
系统默认提供的值有：“slow”、“normal”、“fast”，对应的速度分别为0.6秒、0.4秒和0.2秒。
自己以数字的形式传递则：传递如1000|3000类似的值，单位为毫秒，如果传递1000表示动画的执行速度为1秒。
第二个参数：可选的参数。callBack为动画完成时执行的回调函数，该函数每个元素执行一次。
切换动画方法语法
调用方式[1] => $("selector").toggle()调用方式[2] => $("selector").toggle(speed,callBack)
方法参数说明：
（1）调用方式[1]，不传递参数。切换当前元素（标签）的可见状态，如果当前元素的状态为不可见，则切换为可见，如果当前元素的状态为可见，则切换为不可见。
（2）调用方式[2]，第一个可选的参数为动画执行的速度，第二个可选的参数为动画执行完后执行的回调函数。
总结
show方法和hide方法用来控制标签的显示或者是隐藏，内部的实现逻辑是同时改变标签的宽度、高度和透明度。
5.3 展开和收起动画
jQuery框架中，为我们提供实现滑动效果的方法，slideDown和slideUp方法分别可以用来控制标签展开和收起。
展开和收起动画方法语法
slideDown(speed，callBack);slideUp(speed，callBack)slideToggle(speed,callBack)
方法解释
slideDown方法的功能是设置让指定标签的高度从顶部向底部增加，以呈现出一种展开的动画效果，元素的其他属性不会发生任何变化。
sldeUp方法的功能是设置让指定标签的高度从底部向顶部减小，仅仅改变标签的高度，其他的属性并不会改变。
slideToggle方法用来切换所选择元素的高度，如果当前标签的高度不为0，那么调用该方法后就会把标签的高度过渡为0，实现收起的效果，否则就实现展开的效果。
注意：无论是展开还是收起的动画方法，他们的动画效果都仅仅只会改变（增加或减小）标签的高度。
参数说明
第一个参数：动画执行的时间，同show方法。
第二个参数：动画执行完毕的回调函数，可以省略，同show方法。
代码示例
1 <body> 2 <div>我是div</div> 3 <button>展开</button> 4 <button>收起</button> 5 <button>切换</button> 6 <script> 7 $(function () { 8 $("button").eq(0).click(function () { 9 $("div").slideDown(2000,function () { 10 console.log("展开"); 11 }); 12 }) 13 $("button").eq(1).click(function () { 14 $("div").slideUp(2000); 15 }) 16 $("button").eq(2).click(function () { 17 $("div").slideToggle(1000,function () { 18 alert("切换动画指定完毕") 19 }); 20 }) 21 }) 22 </script> 23 </body>
5.4 淡入和淡出动画
jQuery框架中还提供了淡入和淡出的动画方法，这两个方法分别是fadeIn和fadeOut。
淡入和淡出动画方法语法
fadeIn(speed，callBack);fadeOut(speed，callBack)fadeToggle(speed,callBack)fadeTo(speed,opactity，callBack)
方法说明：
淡入淡出方法的内部实现原理是控制标签的透明度，通过改变选中标签的透明度来实现淡入和淡出的动画效果，并不修改其他的属性。
fadeIn()方法的作用是淡入动画，即改变标签的透明度让标签慢慢的显示出来。
fadeOut()方法的作用是淡出动画，即改变标签的透明度让标签慢慢的消失（透明度为0）。
fadeToggle()方法的作用是切换动画，如果当前标签的透明度不为0，那么就执行淡出动画，否则就执行淡入动画。
fadeTo()方法的作用是淡入到，即使用动画效果实现将标签的透明度设置为指定的值。
备注：标签透明度的取值范围为0.0~1.0。
参数说明：
speed参数：动画执行的速度，单位为毫秒。
callBack参数：动画执行完毕的回调函数，可选。
opacity参数：指定的标签透明度（0.0~1.0）。
代码示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JS/jquery-3.2.1.js"></script> 7 <style> 8 div{ 9 width: 400px; 10 height: 200px; 11 background: red; 12 } 13 </style> 14 </head> 15 <body> 16 <div>我是div</div> 17 <button>淡入</button> 18 <button>淡出</button> 19 <button>切换</button> 20 <button>惦记我</button> 21 <script> 22 //fadeIn:淡入 23 //fadeOut:淡出 24 //fadeToggle切换 25 //fadeTo:淡入淡出到...0.5 26 $(function () { 27 //01 获取页面中指定的按钮,添加点击事件 28 $("button:eq(0)").click(function () { 29 //02 点击按钮后,获取页面中的div标签,设置动画 30 //第一个参数:速度 31 //第二个参数:回调 32 $("div").fadeIn(2000,function () { 33 alert("显示完成"); 34 }); 35 }) 36 $("button:eq(1)").click(function () { 37 $("div").fadeOut(1000,function () { 38 alert("淡出") 39 }); 40 }) 41 $("button:eq(2)").click(function () { 42 $("div").fadeToggle(); 43 }) 44 $("button:eq(3)").click(function () { 45 //第一个参数:速度 46 //第二个参数:目标值 47 //第三个参数:回调 48 $("div").fadeTo(1000,0.5,function () { 49 alert("执行动画完毕") 50 }); 51 }) 52 }) 53 </script> 54 </body> 55 </html>
5.5 自定义动画
jQuery框架中本身已经为我们封装好了一些简单的控制标签宽高、透明度相关的方法，如显示和隐藏、展开和收起、淡入和淡出，除了这些方法之外，jQuery还为我们提供了animate（）方法，允许我们自定义动画效果，通过一些设置我们可以实现更加复杂的动画效果，
自定义动画的语法
animate(params,speed,easing,callBack)
参数说明：
第一个参数：params是一个对象。在该对象中以键值对的方式来要控制的属性样式和对应的值表示。
第二个参数：speed速度，可以是默认字符串中的某个（“slow” “normal” “fast”）或者是自定义的数字。
第三个参数：easing为动画插件使用的可选参数，用来控制动画的表现效果，通常有linear和swing等固定值。
第四个参数：动画执行完毕后的回调函数。
代码示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 50px; 10 background: red; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- 16 animate({},timer,fn) 17 第一个参数:目标对象 18 第二个参数:速度 19 第三个参数:回调函数 20 --> 21 <div>我是个好人</div> 22 <button> 23 喜欢我就点我吧 24 </button> 25 <button> 26 喜欢我就点我吧2 27 </button> 28 <script src="js/jquery-3.2.1.js"></script> 29 <script> 30 $(function () { 31 $("button:eq(0)").click(function () { 32 $("div").animate({ 33 width:"+=50", 34 height:"+=100" 35 },1000); 36 }) 37 $("button:eq(1)").click(function () { 38 //01 直接设置目标值:速度和回调函数可以被省略 39 // $("div").animate({ 40 // width:400, 41 // height:100 42 // },2000,function () { 43 // alert("执行完毕"); 44 // }) 45 //02 第二种用法 46 // $("div").animate({ 47 // width:"+=50", 48 // height:"+=100" 49 // },1000); 50 //03 动画切换(如果有值那么就设置为0,否则就恢复) 51 $("div").animate({ 52 width:"toggle", 53 height:"+=100" 54 },1000); 55 }) 56 }) 57 </script> 58 </body> 59 </html>
动画队列、动画停止和动画延迟
动画队列:如果某个标签身上要调用多个动画相关方法，即需要展示多个动画效果，那么所有的这些动画效果并不会同一时刻发生，而是需要在队列中排队，然后按照队列中动画效果的顺序依次展现。
动画停止：在执行动画的时候，可以通过stop（）方法来停止动画。停止动画的语法为：
stop（clearQueue,gotoEnd）
方法和参数说明：
stop方法的功能是停止指定标签中正在执行的动画，其中第一个参数clearQueue为可选参数，传递一个布尔类型的值，表示是否停止正在执行的动画。第二个参数gotoEnd也是可选参数，传递一个布尔类型的值，表示是否立即完成正在执行的动画。
动画延迟：设置一个延时的值来推迟后续队列中动画的执行，可以传递延迟的具体时间，单位为毫秒。
代码示例01
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 200px; 10 background: yellow; 11 } 12 </style> 13 </jQuery基础教程开机动画 看图学Android---Android 开发实例教程五
开机动画 看图学Android---Android 开发实例教程五