jQuery动画制作与特效教程

使用show()和hide()方法

在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。

在jQuery中提供了show()和hide()两个方法,来直接实现元素对象的显示和隐藏。

jQuery代码：

$(function(){$("input:first").click(function(){    $("p").hide(); //隐藏});$("input:last").click(function(){    $("p").show(); //显示});});</script>

HTML代码：

<input type="button" value="Hide"> <input type="button" value="Show"><p>点击按钮，看看效果</p><span>一段其它的文字</span>

制作多级菜单

jQuery代码:

$(function(){$("li:has(ul)").click(function(e){    if(this==e.target){ //只有点击当前菜单选项时才执行收起子菜单动作        if($(this).children().is(":hidden")){        //如果子项是隐藏的则显示        $(this).css("list-style-image","url(minus.gif)")        .children().show();        }else{        //如果子项是显示的则隐藏        $(this).css("list-style-image","url(plus.gif)")        .children().hide();        }    }    return false; //避免不必要的事件混绕    }).css("cursor","pointer").click(); //加载时触发点击事件    //对于没有子项的菜单，统一设置    $("li:not(:has(ul))").css({    "cursor":"default",    "list-style-image":"none"    });});</script>

HTML代码:

<ul><li>第1章 Javascript简介</li><li>第2章 Javascript基础</li><li>第3章 CSS基础<ul><li>第3.1节 CSS的概念</li><li>第3.2节 使用CSS控制页面<ul><li>3.2.1 行内样式</li><li>3.2.2 内嵌式</li></ul></li><li>第3.3节 CSS选择器</li></ul></li><li>第4章 CSS进阶<ul><li>第4.1节 div标记与span标记</li><li>第4.2节 盒子模型</li><li>第4.3节 元素的定位<ul><li>4.3.1 float定位</li><li>4.3.2 position定位</li><li>4.3.3 z-index空间位置</li></ul></li></ul></li></ul>

理解: e.target是引发事件的元素

this是当前执行事件句柄的元素,this等于e.currentTarget(在事件冒泡阶段中的当前DOM元素 )

if(this==e.target)语句作用。

this指的是定义事件的所有含有ul的li标签。

e.target指的是触发事件的对象,可能是包含ul的li, 也可能是该li内部的任何元素, 显然我们不能点击内部任意位置都触发事件，

所以必须添加判断, 只有点击当前菜单选项时才执行收起子菜单动作;如果去掉这个判断, 那么只要你点击二级菜单的任意位置, 就会收起菜单,

显然是不行的, 你可以去掉判断看看效果就明白了。

使用toggle()方法实现显隐切换

曾经介绍过toggle()方法,该方法接受两个函数作为参数,相互切换;

如果不接受参数,toggle()方法将默认为在show()和hide()之间切换,因此修改上面案列为:

$(function(){    $("li:has(ul)").click(function(e){    if(this==e.target){ //只有点击当前菜单选项时才执行收起子菜单动作    $(this).children().toggle();    $(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))    }    return false; //避免不必要的事件混绕    }).css("cursor","pointer").click(); //加载时触发点击事件    //对于没有子项的菜单，统一设置    $("li:not(:has(ul))").css({    "cursor":"default",    "list-style-image":"none"    });    });    同样利用toggle()方法以上实例也可以进一步简化: 推荐使用    jQuery代码:    $(function(){    $("li").find("ul").prev().click(function(){    $(this).next().toggle();    });    $("li:has(ul)").find("ul").hide();});

HTML代码:

<div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul><li><a href="#">Lastest News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul><li><a href="#">Basketball</a></li><li><a href="#">Football</a></li><li><a href="#">Volleyball</a></li></ul></li><li><a href="#">Weather</a><ul><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="#">Contact Me</a></li></ul></div>

元素显隐和渐入渐出效果

show(duration,[callback]) duration表示动画执行的时间长短,可以是表示速度的字符串,包括slow、normal、fast，

也可以是表示时间的整数(毫秒);callback为可选的回调函数,在动画完成后执行;

jQuery代码：

$(function(){    $("input:first").click(function(){    $("img").hide(3000); //逐渐隐藏(大小)    });    $("input:last").click(function(){    $("img").show(1000); //逐渐显示(大小)    });});

HTML代码：

<input type="button" value="Hide"> <input type="button" value="Show"><p><img src="01.jpg"></p>

与show()和hide()方法一样,toggle()方法也可以接受两个参数,制作成动画的效果;

jQuery代码：

$(function(){    $("li").find("ul").prev().click(function(){    $(this).next().toggle(500); //逐渐的显隐    });    $("li:has(ul)").find("ul").hide();});

HTML代码:

<div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul><li><a href="#">Lastest News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul><li><a href="#">Basketball</a></li><li><a href="#">Football</a></li><li><a href="#">Volleyball</a></li></ul></li><li><a href="#">Weather</a><ul><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="#">Contact Me</a></li></ul></div>

使用fadeIn()和fadeOut()方法

fadeIn(duration,[callback]) 渐显(颜色增强)

fadeOut(duration,[callback]) 渐隐(颜色褪色)

其中参数duration和callback与slow()、hide()中的完全相同;

制作渐渐褪色的动画效果:

jQuery代码:

$(function(){    $("input:eq(0)").click(function(){    $("img").fadeOut(3000); //逐渐fadeOut    });    $("input:eq(1)").click(function(){    $("img").fadeIn(1000); //逐渐fadeIn    });    $("input:eq(2)").click(function(){    $("img").hide(3000); //逐渐隐藏    });    $("input:eq(3)").click(function(){    $("img").show(1000); //逐渐显示    });});

HTML代码:

<input type="button" value="FadeOut"><input type="button" value="FadeIn"><input type="button" value="Hide"><input type="button" value="Show"><p><img src="02.jpg"></p>

使用fadeTo()方法自定义变幻目标透明度;

jQuery代码:

fadeTo(duration,opacity,callback)方法,能够让开发者自定义变幻的目标透明度.其中opacity的取值范围为0.0~1.0

$(function(){    $("input:eq(0)").click(function(){    $("img").fadeOut(1000);    });    $("input:eq(1)").click(function(){    $("img").fadeIn(1000);    });    $("input:eq(2)").click(function(){    $("img").fadeTo(1000,0.5);    });    $("input:eq(3)").click(function(){    $("img").fadeTo(1000,0);    });});

HTML代码:

<input type="button" value="FadeOut"><input type="button" value="FadeIn"><input type="button" value="FadeTo 0.5"><input type="button" value="FadeTo 0"><p><img src="03.jpg"></p>

当使用fadeOut()方法时,图片完全消失后将不在占用<p>的空间,

而使用fadeTo(1000,0)时,虽然图片也完全不显示,但仍然占用着标记<p>的空间

幻灯片效果

slideUp()和slideDown()来模拟PPT中的类似幻灯片拉窗帘的特效

slideUp(duration,[callback]) 上滑(消失)

slideDown(duration,[callback]) 下滑(显示)

jQuery代码:

$(function(){$("input:eq(0)").click(function(){$("div").add("img").slideUp(1000); //相当于$("div,img")});$("input:eq(1)").click(function(){$("div").add("img").slideDown(1000);});$("input:eq(2)").click(function(){$("div").add("img").hide(1000);});$("input:eq(3)").click(function(){$("div").add("img").show(1000);});});

HTML代码:

<input type="button" value="SlideUp"><input type="button" value="SlideDown"><input type="button" value="Hide"><input type="button" value="Show"><br><div></div><img src="04.jpg">

停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。

点击Go之后开始动画,点Stop之后会在当前位置停下来

HTML 代码:

<button id="go">Go</button> <button id="stop">STOP!</button><div class="block"></div><button id="go">Go</button> <button id="stop">STOP!</button><div class="block"></div>

jQuery 代码:

// 开始动画$("#go").click(function(){$(".block").animate({left: '+200px'}, 5000);});// 当点击按钮后停止动画$("#stop").click(function(){$(".block").stop();});

实例：阻止动画播放

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">div{width: 300px;height: 500px;background-color: orange;}</style></head><body><button>动画bug</button><div></div><script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("button").click(function(){//$("div").stop(true).slideToggle(); //stop(true)阻止重复点击播放//第二种方法我们称之为函数节流//我判断你是否在动画中 如果在我就直接终止代码 如果不在那么久继续/*if(div是否在动画中){return;}*/console.log($("div").is(":animated"));//这个就是判断div是否在动画过程中if($("div").is(":animated")){return; //函数节流}$("div").slideToggle(3000);})</script></body></html>

delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;list-style: none;}fieldset{width: 800px;margin: 0 auto;}ul{margin: 20px;height: 50px;}li{width: 48px;height: 48px;float: left;margin-right: -1px;line-height: 48px;text-align: center;border: 1px solid #000;}</style></head><body><fieldset id=""><legend>特效</legend><button>┏ (゜ω゜)=☞</button><ul><li>今</li><li>天</li><li>是</li><li>一</li><li>个</li><li>好</li><li>天</li><li>气</li></ul></fieldset><script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("button").click(function(){/*$("li:eq(0)").slideToggle(function(){$("li:eq(1)").slideToggle(function(){$("li:eq(2)").slideToggle(function(){$("li:eq(3)").slideToggle(function(){$("li:eq(4)").slideToggle(function(){$("li:eq(5)").slideToggle(function(){$("li:eq(6)").slideToggle(function(){$("li:eq(7)").slideToggle();})});})})})})})*//*$("li:eq(0)").slideToggle(function(){//上述代码优化为$(this).next().slideToggle(function fn(){$(this).next().slideToggle(fn);})})*/$("li").each(function(index,ele){$(this).delay(index*400).slideUp()})})</script></body></html>

总结：

1、基本效果

show()：将隐藏的元素显示

show(speed,[callback]) ：以动画的效果显示

hide()：将显示的元素隐藏

hide(speed,[callback]) ：以动画的效果隐藏

toggle()：显示或者隐藏

toggle(switch) ：如果参数为true则表示只显示, 反之如果参数为false则表示只隐藏

toggle(speed,[callback])：以动画的方式显示或者是隐藏

参数说明：

speed：速度 单位为毫秒

"slow", 缓慢

"normal", 正常

"fast" 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

2、滑动效果

slideDown()：将隐藏的元素显示

slideDown(speed,[callback]) ：以动画的方式显示

slideUp()：将显示的元素隐藏

slideUp(speed,[callback]) ：以动画的方式隐藏

slideToggle()：隐藏或显示

slideToggle(speed,[callback])：以动画的方式隐藏或者显示

参数说明：

speed：速度 单位为毫秒

"slow", 缓慢

"normal", 正常

"fast" 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

3、淡入淡出

fadeIn()：淡入

fadeIn(speed,[callback]) ：以动画的方式进行淡入

fadeOut()：淡出

fadeOut(speed,[callback])：以动画的方式进行淡出

fadeTo(speed,opacity,[callback]) ：淡入淡出到指定值

opacity：透明度 取值：0-1之间 0表示完全透明 1表示不透明

callback：回调函数 当动画执行完毕以后再来执行的函数

show() 显示元素 hide()隐藏元素 toggle()显示和隐藏切换

fadeIn() 渐显(颜色增强) fadeOut()渐隐(颜色褪色) fadeTo() 自定义变换目标透明度 fadeToggle() 淡入和淡出切换

slideUp() 幻灯片上滑(消失) slideDown() 幻灯片下滑(显示) slideToggle() 幻灯片上滑和下滑切换

4 停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。