Jquery的动画及特效.pptxVIP

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