18.使用slideToggle()方法实现图片“变脸”效果
使用slideToggle()
方法可以切换slideUp()
和slideDown()
,即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动,格式为:
$(selector).slideToggle(speed,[callback])
其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
例如,在页面中,使用slideToggle()
方法实现图片“变脸”效果,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击第一张图片时,向上滑动收起该图片,当收起完成时,触发回调函数,调用第二张图片的slideToggle()
方法,向下滑动显示第二张图片。