调用show()和hide()方法显示和隐藏元素
动画效果的show()和hide()方法
调用toggle()方法实现动画切换效果
第一节我们学过实现元素的显示与隐藏需要使用hide()
与show()
,那么有没有更简便的方法来实现同样的动画效果呢?
调用toggle()
方法就可以很容易做到,即如果元素处于显示状态,调用该方法则隐藏该元素,反之,则显示该元素,它的调用格式是:
$(selector).toggle(speed,[callback])
其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
例如,调用toggle()
方法以动画的效果显示和隐藏图片元素,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当按钮显示内容为“隐藏”时,点击该按钮,将调用toggle()
方法以动画的方式隐藏图片元素,隐藏成功后,按钮显示的内容变为“显示”。
使用slideUp()和slideDown()方法的滑动效果
可以使用slideUp()
和slideDown()
方法在页面中滑动元素,前者用于向上滑动元素,后者用于向下滑动元素,它们的调用方法分别为:
$(selector).slideUp(speed,[callback])
和$(selector).slideDown(speed,[callback])
其中speed参数为滑动时的速度,单位是毫秒,可选项参数callback为滑动成功后执行的回调函数名。
要注意的是:slideDown()
仅适用于被隐藏的元素;slideup()
则相反。
例如,调用slideUp()
和slideDown()
方法实现页面中元素的向上和向下的滑动效果,如下图所示:
在浏览器中显示的效果:
从图中可以看出,根据按钮中显示的内容,分别调用slideUp()
和slideDown()
方法,实现图片元素向上和向下的滑动效果,当每个滑动效果完成时,再通过回调函数改变按钮中显示内容。
滑动与淡入淡出的区别:滑动改变元素的高度,淡入淡出改变元素的透明度。
使用slideToggle()方法实现图片“变脸”效果
使用slideToggle()
方法可以切换slideUp()
和slideDown()
,即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动,格式为:
$(selector).slideToggle(speed,[callback])
其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
例如,在页面中,使用slideToggle()
方法实现图片“变脸”效果,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击第一张图片时,向上滑动收起该图片,当收起完成时,触发回调函数,调用第二张图片的slideToggle()
方法,向下滑动显示第二张图片。
使用fadeIn()与fadeOut()方法实现淡入淡出效果
fadeIn()
和fadeOut()
方法可以实现元素的淡入淡出效果,前者淡入隐藏的元素,后者可以淡出可见的元素,它们的调用格式分别为:
$(selector).fadeIn(speed,[callback])
和$(selector).fadeOut(speed,[callback])
其中参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名。
例如,分别在页面中以淡入淡出的动画效果显示图片元素,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“淡出”按钮时,调用fadeOut()
方法以淡出效果隐藏图片,当点击“淡入”按钮时,调用fadeIn()
方法以淡入效果显示图片。
使用fadeTo()方法设置淡入淡出效果的不透明度
调用animate()方法制作简单的动画效果
调用animate()方法制作移动位置的动画
调用stop()方法停止当前所有动画效果
stop()
方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画,它的调用格式为:
$(selector).stop([clearQueue],[goToEnd])
其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。
例如,在页面中,当图片元素正在执行动画效果时,点击“停止”按钮,中止正在执行的动画效果,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当页面中的图片正在执行动画效果向右移动时,由于点击了“停止”按钮,执行了图片元素的stop方法,因此,中止了正在执行的动画效果。
调用delay()方法延时执行动画效果