jQuery动画与效果
1 显示与隐藏元素
1.1 显示元素
很多时候,有些比较细节性的信息开始的时候没有必要让用户看到,可以让用户想要查看的时候再显示出来。传统的处理方式是转向到另外一个页面进行显示,这样就使用户离开了先前的页面,而这可能并不是用户想要的。
jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数。
函数名 | show(speed,[callback]) |
---|---|
作用 | 以动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度 |
返回值 | jQuery |
参数 | speed (String,Number):三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000) callback (Function):在动画完成时执行的函数,每个元素执行一次 |
1.2 隐藏元素
经常会在网站上见到这种效果,某些需要显示给用户的信息,可能在用户看过之后就不需要再留在页面上了。一般的处理方式是在这种元素旁边多一个按钮,由用户决定是否将该元素在页面上隐藏。
函数名 | hide(speed,[callback]) |
---|---|
作用 | 以动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度 |
返回值 | jQuery |
参数 | speed (String,Number):三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000) callback (Function):在动画完成时执行的函数,每个元素执行一次。 |
示例:点击“显示图片”按钮显示图片,点击“隐藏图片”按钮隐藏图片
<button id="btn1">显示图片</button>
<button id="btn2">隐藏图片</button><br>
<img src="./images/p1.jpg" id="img" width="200">
<script>
$(function () {
$("#btn1").bind("click", function () {
$("#img").show(1000);
})
$("#btn2").bind("click", function () {
$("#img").hide(1000);
})
})
</script>
1.3 交替显示元素
jQuery中用于实现交替显示隐藏的函数是toggle(speed,[callback]) 。
函数名 | toggle(speed,[callback]) |
---|---|
作用 | 以的动画切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的 |
返回值 | jQuery |
参数 | speed (String,Number):三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000) callback (Function): 在动画完成时执行的函数,每个元素执行一次 |
示例:点击同一个按钮,控制图片的出现与隐藏
<button id="btn1">交替显示图片</button><br>
<img src="./images/p1.jpg" id="img" width="200">
<script>
$(function () {
$("#btn1").bind("click", function () {
$("#img").toggle(1000);
})
})
</script>
2 滑动效果
2.1 向上收缩效果
所谓向上收缩效果就是对页面元素通过高度变化(向上减小)来动态地隐藏。在jQuery中实现该效果的函数是slideUp(speed,[callback]) 。
函数名 | slideUp(speed,[callback]) |
---|---|
作用 | 通过高度变化来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。 |
返回值 | jQuery |
参数 | speed (String,Number):三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如1000) callback (Function): 在动画完成时执行的函数,每个元素执行一次 |
示例:点击按钮收缩图片。
<button id="btn1">收缩图片</button><br>
<img src="./images/p1.jpg" id="img" width="200">
<script>
$(function () {
$("#btn1").bind("click", function () {
$("#img").slideUp(1000);
})
})
</script>
2.2 向下展开效果
向上收缩用于元素的隐藏,向下展开则用于隐藏元素的显示。jQuery中用于实现向下滑动展开元素内容的函数为slideDown(speed,[callback]) 。
函数名 | slideDown(speed,[callback]) |
---|---|
作用 | 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数 |
返回值 | jQuery |
参数 | speed (String,Number):三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如1000)。 callback (Function): 在动画完成时执行的函数,每个元素执行一次 |
示例:点击按钮1收缩图片,点击按钮2展开图片。
<button id="btn1">收缩图片</button>
<button id="btn2">展开图片</button><br>
<img src="./images/p1.jpg" id="img" width="200">
<script>
$(function () {
$("#btn1").bind("click", function () {
$("#img").slideUp(1000);
})
$("#btn2").bind("click", function () {
$("#img").slideDown(1000);
})
})
</script>
2.3 交替伸缩元素
交替伸缩样式和交替显示隐藏类似,都是当用户单击时,如果操作的页面元素是显示状态,则将其隐藏,如果其是隐藏的,则将其显示出来。只不过这里显示的动画效果是向上或者向下滑动。jQuery中处理交替伸缩样式的函数是slideToggle(speed,[callback]) 。
函数名 | slideToggle(speed,[callback]) |
---|---|
作用 | 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数 |
返回值jQuery | |
参数 | speed (String,Number):种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如1000) callback (Function):在动画完成时执行的函数,每个元素执行一次 |
示例:点击按钮收缩图片,再点击按钮展开图片,交替显示
<button id="btn1">交替收缩图片</button><br>
<img src="./images/p1.jpg" id="img" width="200">
<script>
$(function () {
$("#btn1").bind("click", function () {
$("#img").slideToggle(1000);
})
})
</script>
3 淡入淡出效果
3.1 淡出效果
淡出效果是指页面上元素的透明度不断增大,直到消失不见的效果。jQuery中处理淡出效果的是fadeOut(speed,[callback])函数。
函数名 | fadeOut(speed,[callback]) |
---|---|
作用 | 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数 |
返回值 | jQuery |
参数 | speed (String,Number):三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如1000)。 callback (Function):在动画完成时执行的函数,每个元素执行一次。 |
<button id="btn1">淡出效果</button><br>
<img src="./images/p1.jpg" id="img" width="200">
<script>
$(function () {
$("#btn1").bind("click", function () {
$("#img").fadeOut(1000);
})
})
</script>
3.2 淡入效果
淡入效果是指页面上元素的透明度不断减小,直到清晰显示出来的效果。在jQuery中实现淡入效果使用fadeIn(speed,[callback])函数。
函数名 | fadeIn(speed,[callback]) |
---|---|
作用 | 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数 |
返回值 | jQuery |
参数 | speed (String,Number):三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如1000)。 callback (Function):在动画完成时执行的函数,每个元素执行一次 |
示例:点击按钮1淡出效果,点击按钮2淡入效果。
<button id="btn1">淡出效果</button>
<button id="btn2">淡入效果</button><br>
<img src="./images/p1.jpg" id="img" width="200">
<script>
$(function () {
$("#btn1").bind("click", function () {
$("#img").fadeOut(1000);
})
$("#btn2").bind("click", function () {
$("#img").fadeIn(1000);
})
})
</script>
3.3 交替淡入淡出
当用户单击时,如果操作的页面元素是显示状态,则将其隐藏,如果其是隐藏的,则将其显示出来。
函数名 | fadeToggle(speed,[callback]) |
---|---|
作用 | 根据元素变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数 |
返回值 | jQuery |
参数 | speed (String,Number):三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如1000)。 callback (Function):在动画完成时执行的函数,每个元素执行一次。 |
示例:点击按钮图片淡出,再点击按钮图片淡入。
<button id="btn1">交替淡入淡出</button><br>
<img src="./images/p1.jpg" id="img" width="200">
<script>
$(function () {
$("#btn1").bind("click", function () {
$("#img").fadeToggle(1000);
})
})
</script>
3.4 自定义不透明度淡出
fadeOut(speed,[callback])函数和fadeIn(speed,[callback])函数实现的最终结果要么是完全显示元素,要么是完全隐藏元素,不能够停留在中间的某个状态上。jQuery中专门有一个函数来设定最终结果为中间某个状态,换句话说就是设定最终的元素为半透明状态。这个函数就是fadeTo(speed,opacity,[callback])函数。
函数名 | fadeTo(speed,opacity,[callback]) |
---|---|
作用 | 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数 |
返回值 | jQuery |
参数 | speed (String,Number):三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如1000)。 opacity (Number):要调整到的不透明度值(0到1之间的数字)。 callback (Function):(可选)在动画完成时执行的函数 |
示例:点击按钮,将图片淡出为50%透明度
<button id="btn1">淡出</button><br>
<img src="./images/p1.jpg" id="img" width="200">
<script>
$(function () {
$("#btn1").bind("click", function () {
$("#img").fadeTo(1000, 0.5);
})
})
</script>
4 自定义动画效果
jQuery提供了诸如滑动效果、淡入淡出等一系列十分优秀的动画效果,可以让用户很方便就实现一些很酷的动画特效。
但是,这些简单的特效远远不能满足用户个性化的需求。因此,jQuery还有一个更加强大的动画生成机制,那就是自定义动画。
通过jQuery的自定义动画,可以随心所欲的实现用户需要的动画效果,有些效果甚至可以和Flash相媲美。本节将首先介绍jQuery中自定义动画的两种方式,然后介绍jQuery中动画队列的使用。
jQuery中用于自定义动画的函数是animate(params[,duration[,easing[,callback]]])函数。该函数可以有1~4个参数。
函数名 | animate(params[,duration[,easing[,callback]]]) |
---|---|
作用 | 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”) |
返回值 | jQuery |
参数 | params (Options):一组包含作为动画属性和终值的样式属性和及其值的集合 duration (String,Number):(可选)三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如1000)。 easing (String):(可选)要使用的擦除效果的名称(需要插件支持).默认jQuery提供linear和swing。 callback (Function):(可选)在动画完成时执行的函数 |