第五章_jQuery动画与特效.ppt

jQuery 基础教程 宁波大学教师教育学院 梅剑峰 第五章 jQuery动画与特效 一、显示与隐藏 在JavaScript中，要实现元素的显示与隐藏，一般是通过改变元素的显示方式来实现。如： 显示：document.getElementById(“p1”).style.display=“block”; 隐藏：document.getElementById(“p1”).style.display=“none”; 在jQuery中，既可以通过修改元素css样式的方法实现： 显示：$(“#p1”).css(“display”,“block”); 隐藏：$(“#p1”).css(“display”,“none”); 也可以通过jQuery提供的两个方法实现： 显示：show() 隐藏：hide() 例题 5-1.html 一、显示与隐藏 动画效果的 show()和hide()方法： jQuery中的show()和hide()方法，不仅可以实现“无动画”版的显示和隐藏，还可以完成动画效果的显示和隐藏，其格式如下： show(speed,[callback]) hide(speed,[callback]) 参数speed表示动画的执行速度，有三个默认字符值“slow”、“normal”、“fast”，其对应的速度分别是0.6秒、0.4秒和0.2秒；如果不使用默认的字符值，也可以直接写入数字，如1000，表示该动画的执行速度为1000毫秒。 参数callback为在动画完成时执行的回调函数，该函数每个元素执行一次。 例题 5-1-1.html 5-1-2.html 一、显示与隐藏 使用了速度参数的hide()方法会从下到上减少“内容”的高度、从右到左减少“内容”的宽度，同时减少“内容”的透明度，直至这三个属性的值都为0，最后设置该元素的CSS规则为“display:none”，而show()方法则会从上到下增加“内容”的高度、从左到右增加“内容”的宽度，同时增加“内容”的透明度，直到“内容”完全出现。 一、显示与隐藏 toggle()方法 — 切换元素的显示状态。如果是显示状态，则切换成隐藏状态；如果是隐藏状态，则切换成显示状态。该方法有三种调用形式： 形式一：无参数调用格式 toggle() 形式二：逻辑参数调用格式 toggle(switch) switch为一个布尔值，即true或false。当该值为true时，显示元素，否则隐藏元素。 形式三：动画效果调用格式 toggle(speed,[callback]) 参数的含义与show()方法相同。 例题 5-2.html 二、滑动 在jQuery中，还可以滑动的效果改变元素的高度，即“拉窗帘”的效果。它的实现方法有两个：slideDown()和slideUp()。 slideDown()— 以动画的效果将所选择的元素的高度向下增大，使其呈现一种“滑动”的效果。但元素的其他属性并不发生变化。格式为： slideDown(speed,[callback]) slideUp()—以动画的效果将所选择的元素的高度向上减小。格式为： slideUp(speed,[callback]) 例题 5-3.html 二、滑动 slideToggle()方法— 根据元素当前的显示状态自动进行切换。语法格式为： slideToggle(speed,[callback]) 例题 5-4.html 三、淡入淡出 在jQuery中，可以通过fadeIn()和fadeOut()方法实现元素的淡入和淡出效果。语法格式为： 淡入：fadeIn(speed,[callback]) 淡出：fadeOut(speed,[callback]) 例题 5-5.html 三、淡入淡出 fadeTo()方法 — 根据给定的不透明度的值执行淡入淡出动画。语法格式为： fadeTo(speed,opacity,[callback]) 参数opacity为指定的不透明度值，取值范围是0.0~1.0。 例题 5-6.html 四、自定义动画 前面介绍的动画效果都是元素局部属性发生变化，如高度、宽度、可见性等。在jQuery中，也运行用户通过anima