jq的动画与特效

《jq的动画与特效》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Jquery的动画与特效引言为提升用户的体验度，JQ采用封装好的方法实现了一系列的动画效果，例如：显示与隐藏、淡入淡出、自定义动画。JQ中的动画显示与隐藏show()与hide()方法：show()方法是显示元素的方法，相当与：$(“#某元素”).css(“display”,”block”);hide()方法是显示元素的方法，相当与:$(“#某元素”).css(“display”,”none”);JQ中的动画显示与隐藏显示隐藏示例：方法：show()、hide()示例：功能描述：页面中文本较多，只显示一部分，用户点击“显示”时可以查看更多的内

2、容，点击“隐藏”时可以隐藏多余的内容。实现代码：示例show与hide.htmlJQ中的动画显示与隐藏动画版的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])示例：功能描

3、述：通过show()方法，在页面中显示图片，同时执行一个回调函数，改变边框样式，点击图片时可以将其隐藏。实现代码：示例动画版的show与hide.htmlJQ中的动画显示与隐藏toggle()方法：切换元素状态，如果是显示的，将其隐藏；如果是隐藏的，将其显示。有三种形式：toggle()：默认的状态切换toggle(bool)：bool为true时显示，为false时隐藏toggle(speed,[callback])：设定速度和回调函数JQ中的动画显示与隐藏显示与隐藏的切换：方法：toggle()示例：功能描述：三个按钮调用上文中的三种t

4、oggle使用形式，实现图片的切换效果。实现代码：示例toggle.htmlJQ中的动画滑动slideDown()和slideUp()方法：slideDown()：将元素的高度向下增大，产生滑动效果。可设定速度和回调函数。slideUp()：将元素的高度向上减小，产生滑动效果。可设定速度和回调函数。JQ中的动画滑动滑动示例：方法：slideDown(speed,[callback])、slideUp(speed,[callback])示例：功能描述：点击标题时，更改标题和内容栏中的图片实现代码：示例slideDown和slideUp.ht

5、mlJQ中的动画滑动slideToggle()方法：就像show()、hide()和toggle()方法的关系一样，同样存在一个slideToggle()方法，可以切换元素的滑动方向：slideToggle(speed,[callback])：设定速度和回调函数JQ中的动画滑动滑动切换示例：方法：slideToggle()示例：功能描述：使用动画效果切换图片的高度。实现代码：示例slideToggle.htmlJQ中的动画淡入淡出fadeIn()和fadeOut()方法：show()、hide()是设置元素是否显示，而fadeIn()和fa

6、deOut()是设置元素的透明度，从而实现淡入淡出：fadeIn(speed,[callback])：淡入，参数为设定的速度和回调函数fadeOut(speed,[callback])：淡出，参数为设定的速度和回调函数JQ中的动画淡入淡出淡入淡出示例：方法：fadeIn()和fadeOut()示例：功能描述：使用动画效果进行淡入淡出。实现代码：示例fadeIn和fadeOut淡入淡出.htmlJQ中的动画自定义动画animate()方法：animate()可以让用户自定义动画，语法格式如下：animate(params,[duration]

7、,[easing],[callback])：params表示用于制作动画效果的属性和值的集合；duration表示动画的速度，有三种可选项：slow、normal和fast，也可手工指定数字，单位毫秒easing为动画插件使用callback为回调函数JQ中的动画自定义动画自定义动画示例：方法：animate(params,[duration],[easing],[callback])示例：功能描述：使用动画效果进行跳跃。实现代码：示例自定义动画.htmlJQ中的动画谢谢！