JQ的动画与特效.ppt

Jquery的动画与特效
引言
为提升用户的体验度,JQ采用封装好的方法实现了一
系列的动画效果,例如:显示与隐藏、淡入淡出、自定义
动画。
JQ中的动画
显示与隐藏
show()与hide()方法:
show()方法是显示元素的方法,相当与:
$(“#某元素”).css(“display”,”block”);
hide()方法是显示元素的方法,相当与:
$(“#某元素”).css(“display”,”none”);
JQ中的动画
显示与隐藏
显示隐藏示例:
方法:show() 、hide()
示例:
功能描述:页面中文本较多,只显示一部分,用户
点击“显示”时可以查看更多的内容,
点击“隐藏”时可以隐藏多余的内容。
实现代码:示例\
JQ中的动画
显示与隐藏
动画版的show()与hide()方法:
show(speed,[callback])
hide(speed,[callback])
speed表示执行动画的速度,可以有三个值:slow、
normal、fast,、、,也可以填入
相应的数字,例如3000,单位为毫秒。
JQ中的动画
显示与隐藏
动画版的显示隐藏示例:
方法:show(speed,[callback]) 、hide(speed,[callback])
示例:
功能描述:通过show()方法,在页面中显示图片,同
时执行一个回调函数,改变边框样式,
点击图片时可以将其隐藏。
实现代码:示例\
JQ中的动画
显示与隐藏
toggle()方法:
切换元素状态,如果是显示的,将其隐藏;如果是隐
藏的,将其显示。有三种形式:
toggle():默认的状态切换
toggle(bool):bool为true时显示,为false时隐藏
toggle(speed,[callback]):设定速度和回调函数
JQ中的动画
显示与隐藏
显示与隐藏的切换:
方法:toggle()
示例:
功能描述:三个按钮调用上文中的三种toggle使用
形式,实现图片的切换效果。
实现代码:示例\
JQ中的动画
滑动
slideDown()和slideUp()方法:
slideDown():将元素的高度向下增大,产生滑动效果。
可设定速度和回调函数。
slideUp():将元素的高度向上减小,产生滑动效果。
可设定速度和回调函数。
JQ中的动画
滑动
滑动示例:
方法:
slideDown(speed,[callback])、slideUp(speed,[callback])
示例:
功能描述:点击标题时,更改标题和内容栏中的图片

实现代码:示例\
JQ中的动画