第十章 jQuery的动画与特效,回顾,jQuery中的页面载入事件ready()方法有四种写法，其中最简单的写法是$(function()。 jQuery提供了一种统一的事件模型。 在jQuery中，还可以使用bind()方法进行事件的绑定，bind()功能是为每个选择元素的事件绑定处理函数。 调用jQuery中的hover()方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换，该方法在实现运用中，也可以通过jQuery中的事件mouseover与事件mouseout进行替换。 调用jQuery中的toggle()方法，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数进行调用。 one()方法功能是为所选的元素绑定一个仅触发一次的处理函数，trigger()方法的功能是在所选择的元素上触发指定类型的事件。 在jQuery中，可以通过return false实现停止事件的冒泡过程。,理论内容,显示隐藏动画效果 淡入淡出动画效果 滑入滑出动画效果 自定义动画 综合案例：利用滑动效果，轮播图片,show()方法与hide()方法 show()方法会动态地改变当前元素的高度、宽度和不透明度，最终显示当前元素，此时元素的css属性display恢复为除了none之外的初始值。show()方法的语法结构为：,10.1 显示与隐藏动画效果,jQuery对象.show(duration,fn); 其中，参数duration表示动画效果运行的时间，可以使用关键字slow、normal和fast，分别对应时间长度0.6秒、0.4秒和0.2秒，此时参数要加引号；也可以使用数值，单位默认为毫秒，此时参数不需要加引号。,hide()方法会动态改变当前元素的高度、宽度和不透明度，最终隐藏当前元素，此时元素的css属性display修改为none。其语法结构为：,10.1 显示与隐藏动画效果,jQuery对象.hide(duration,fn);,给页面添加一个“显示”按钮，当单击“显示”按钮时，将以动画的方式显示一幅图片，动画完成时执行函数，实现给显示的图片加上边框样式的功能。再一次单击按钮，显示的图片以动画的方式隐藏。,10.1 显示与隐藏动画效果, img display:none; /*图片默认不显示*/ . $(function() $(“#btn“).click(function() if($(this).val()=“显示“) $(“#pic“).show(“slow“,function() $(this).css(“border“:“1px solid #ccc“,“padding“:“5px“); ); $(this).val(“隐藏“) else $(“#pic“).hide(“slow“); $(this).val(“显示“); ); );,toggle()方法 toggle()方法除了可以模拟鼠标的连续单击事件之外，同时还会动态地改变当前元素的高度、宽度和不透明度，最终切换当前元素的可见状态。即如果元素是可见的，则被切换为隐藏状态；如果元素是隐藏的，则被切换为可见状态。其语法结构为：,10.1 显示与隐藏动画效果,jQuery对象.toggle(duration,fn);,制作可伸缩的垂直菜单。初始状态下商品的全部类别为显示状态，单击箭头时，后三项商品类别在隐藏和显示之间进行状态切换，且箭头的方向也在上和下之间切换。,10.1 显示与隐藏动画效果,10.1 显示与隐藏动画效果, ul li.down background-image:url(images/down.jpg); 商品服务分类 母婴用品 家纺居家 $(function() $(“#menu li.lastItem“).click(function() /切换菜单 $(“#menu li:gt(5):not(:last)“).toggle(); /更换底部箭头方向 $(this).toggleClass(“down“); ); );,fadeIn()方法与fadeOut()方法 fadeIn()方法动态地改变当前元素的透明度(其他不变)，实现淡入的动画效果，最终显示当前元素，此时元素的css属性display恢复除了none之外的初始值。fadeIn()方法的格式如下：,10.2 淡入与淡出动画效果,jQuery对象.fadeIn(duration,fn);,fadeIn()方法与fadeOut()方法 fadeOut()方法动态地改变当前元素的透明度（其他不变），实现淡出的动画效果，最终隐藏当前元素，此时元素的css属性display修改为none。fadeOut()方法的格式如下：,10.2 淡入与淡出动画效果,jQuery对象.fadeOut(duration,fn);,将前面示例显示隐藏的动画改成淡入淡出的效果。,10.2 淡入与淡出动画效果,. img display:none; . . $(function() $(“#btn“).click(function() if($(this).val()=“淡入“) $(“#pic“).fadeIn(“slow“,function() $(this).css(“border“:“1px solid #ccc“,“padding“:“5px“); ); $(this).val(“淡出“); else $(“#pic“).fadeOut(“slow“); $(this).val(“淡入“); ); );,fadeToggle()方法 fadeToggle()会动态地改变当前元素的透明度，最终切换当前元素的可见状态。即如果元素是可见的，则通过淡出效果切换为隐藏状态；如果元素是隐藏的，则通过淡入效果切换为可见状态。其语法结构为：,10.2 淡入与淡出动画效果,jQuery对象.fadeToggle(duration,fn);,修改前例垂直菜单，单击箭头时，后三项商品类型的动画效果在淡出和淡入之间切换。,10.2 淡入与淡出动画效果,$(function() $(“#menu li.lastItem“).click(function() /切换菜单 $(“#menu li:gt(5):not(:last)“).fadeToggle(); /更换底部箭头方向 $(this).toggleClass(“down“); ); );,fadeTo()方法 在jQuery中，fadeIn()和fadeOut()方法通过改变元素的透明度来实现元素的显示和隐藏，其透明度从0.0到1.0淡入或从1.0到0.0淡出，从而实现淡入淡出的动画效果；如果要将透明度指定到某一个值，则需要调用fadeTo()方法。fadeTo()的语法格式为：,10.2 淡入与淡出动画效果,jQuery对象.fadeTo(duration,opacity,fn); 参数duration为动画效果的速度，使用方式与hide()、show()方法等一致；参数opacity用于指定不透明值，取值范围是01，0代表完全透明，1代表完全不透明。,为了更好地展示各种透明度值的效果，在页面中创建一个下拉列表框，用于保存各种透明度值，当选择下拉列表框选中某选项时，页面中图片的透明度便指定为该选项值。,10.2 淡入与淡出动画效果, 0.2 1 $(function() $(“#sel“).change(function() var opacity=$(this).val(); $(“img“).fadeTo(3000,opacity); ); ); ,slideDown()方法与slideUp()方法 slideDown()方法会动态地改变当前元素的高度（其他不变），由上到下滑入，即高度向下增大，使其呈现出一种“滑动”的效果，直至最终显示当前元素，此时元素的css属性display恢复为除了none之外的初始值。slideDown()方法的语法格式如下：,10.3 滑入与滑出动画效果,jQuery对象.slideDown(duration,fn);,slideDown()方法与slideUp()方法 slideUp()方法会动态地改变当前元素的高度，由下到上滑出，即高度向上减小，直至最终隐藏当前元素，此时元素的css属性display修改为none。slideUp()方法的语法格式请参考slideDown()方法。,10.3 滑入与滑出动画效果,制作当当网“我的当当”菜单的二级菜单滑入滑出的动画效果，初始状态下“我的当当”二级菜单隐藏，如下图：,10.3 滑入与滑出动画效果,10.3 滑入与滑出动画效果, 购物车 | 我的当当 我的订单 我的收藏 我的余额 | 手机当当 . $(function() $(“.secondLi“).hover(function() $(“.secondLi ul“).slideDown(1000); ,function() $(“.secondLi ul“).slideUp(1000); ); ); ,slideToggle()方法 slideToggle()方法会动态地改变当前元素的高度，最终切换当前元素的可见状态。即如果元素是可见的，则通过滑出效果切换为隐藏状态；如果元素是隐藏的，则通过滑入效果切换为可见状态。其语法结构为：,10.3 滑入与滑出动画效果,JQuery对象.slideToggle(duration,fn); 其参数参考show()方法。,修改前例，当单击当当网中的“我的当当”菜单时，以滑入滑出的动画效果，切换下级菜单的显示隐藏状态。,10.3 滑入与滑出动画效果, $(function() $(“.secondLi“).click(function() $(“.secondLi ul“).slideToggle(1000); ); ); ,简单的动画 animate()方法可以动态地改变当前元素的各种css属性。其语法结构为：,10.4 自定义动画,jQuery对象.animate(properties,duration,fn); 其中，参数properties使用一个“名：值”形式的对象，用来设置需要改变的css属性。animate()方法只能改变可以取数字值的css属性，如大小属性（width、height）、边框属性（border-width）、外边距属性（margin）、内边距属性（padding）、定位属性（top、left、bottom、right）、字体属性（font-size）、文本属性（text-indent、letter-spacing、word-spacing）、背景属性（background-position）和透明度（opacity）。可以缺省的参数duration和fn请参考show()方法的说明。,用animate()方法，在页面中插入一幅图片，单击此图片时，图片放大显示，即宽度和高度均由120px增至180px。,10.4 自定义动画, $(function() $(“img“).click(function() $(this).animate(“width“:“180px“, “height“:“180px“, “slow“); ); ); ,单击页面中的图片，使其在3000毫秒内，同时向右移动100px、向下移动100px，在移动的过程中，其透明度由1.0渐变成0.5。,10.4 自定义动画,img position:absolute; top:0px; left:0px; $(function() $(“img“).click(function() $(this).animate( “left“:“+=100px“, “top“: