JQuery六：特效

JQuery特效：

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

基础特效：
1.$(selector).hide([duration][,complete()]): 隐藏元素
备注:
a.如果不需要特效可以使用css("display","none")来实现。
b.duration可以取值"fast"(200毫秒),"slow"(600毫秒)以及具体的毫秒数值
c.可以通过全局设置jQuery.fx.off=true来关闭所有的动画特效，也包括hide.
2.$(selector).show([duration][,complete()]): 显示元素，其它要点如hide
3.$(selector).toggle([duration][,complete()]): 显示或者隐藏元素，其它要点如hide
淡化fade特效：
1.$(selector).fadeOut([duration][,complete()]): 通过减少opacity逐步淡化的方式隐藏元素。
备注:
a.同hide区别是hide是逐步减少元素大小的方式来达到最终隐藏，而fadeOut则是减少元素opacity的方式来达到最终隐藏
b.duration可以取值"fast"(200毫秒),"slow"(600毫秒)以及具体的毫秒数值
c.可以通过全局设置jQuery.fx.off=true来关闭所有的动画特效，也包括hide.
2.$(selector).fadeIn([duration][,complete()]): 显示元素，与show的区别及其它要点同fadeOut
3.$(selector).fadeTo(duration,opacity[,complete()]): 改变元素的opacity到指定值
备注：
a.opacity为0～1之间的数值，数值越小则越模糊，当opacity=0.0的时候元素不可见但是没有隐藏，这是与fadeOut的区别，当opacity=1.0的时候其效果等同于fadeIn.
b.其它要点同hide.
4.$(selector).fadeToggle([duration][,complete])：通过控制opacity值的方式显示或者隐藏元素，其要点同hide.

滑动sliding特效：
slideDown,slideUp,slideToggle使用方法及基本作用同show,hide,toggle，区别为执行动画效果不一样，slide是通过控制高度来达到效果。

自定义特效：
1.$(selector).animate(cssProperties[,during][,easing][,complete(){})：设置自定义动画特效，其的cssProperties类似{left:"+=100px",width:"-10px"}的css属性变更设置。
2.$(selector).queue([type]):获取与元素关联的即将执行的functions列表，type默认为fx(标准的效果队列)。
$(selectro).queue([type],callback(next){}):插入一个function到元素关联的的即将执行的function列表，type默认为fx.
$(selector).queue([type],newQueue):用新的function队列代替与元素关联的老的function队列
3.$(selector).dequeue([type])：执行以下一个function并从来先进先出队列中删除该function.
备注：queue及dequeue代表了与元素关联的一系列特效function的先进先出队列的操作，如果人为通过queue方法在队列中添加一个function,则在该function执行完毕后一定调用dequeue删除。
4.$(selector).stop([queue][,clearQueue][,jumpToEnd]):停止与元素关联的当前正在执行的动画,queue为队列类型默认为fx；clearQueue参数设置是否清除队列中未执行的动画特效，默认为false；jumpToEnd参数设置是否立即完成当前的动画特效，默认为false.
5.$(selector).clearQueue([type]):在队列中删除所有为执行的function.类似stop(true),但是stop用作动画效果的队列，而clearQueue则可用着所有的通用的队列
6.$(selector).finish([type]):停止正在执行的动画特效，清除队列中排队的动画特效，并完成所有动画特效。类似与stop(true,true),但是finish调用会造成css属性被设置所有动画后的最终状态
7.$(selector).delay(duration[,queueName]):延迟下一个动画特效开始执行时间。
8.jQuery.fx.interval：全局设置所有的动画执行间隔时间，默认为13毫秒。
9.jQuery.fx.off：全局设置是否禁用动画特效，默认为false。

JQuery六：特效相关推荐

六、jQuery动画特效（一）
jQuery动画特效 jQuery动画特效 1.显示和隐藏 2.淡入与淡出 3.向上或向下滑动往期回顾 jQuery动画特效 1.显示和隐藏在 JavaScript 中,如果需要显示或隐藏网页 ...
从零开始学习jQuery (六) AJAX快餐
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
css3轮播不用jpuery_15款效果很酷的最新jQuery/CSS3特效
很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...
精心挑选的23款美轮美奂的 jQuery 图片特效插件
jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...
精心挑选的15款优秀 jQuery 文本特效插件和教程
今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程.jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理, ...
七、jQuery动画特效（二）
jQuery动画特效(二) 一.自定义动画 1.简单动画 2.累加或累减动画 3.多重动画 4.动画队列 5.动画回调函数二.停止动画 1.停止元素的动画 2.判断元素是否处于动画状态 3.延迟动画
北大青鸟 JQuery制作特效第二章（上机练习
北大青鸟 JQuery制作特效第二章 (上机练习练习一丶制作简易的当当购物车页面 <!DOCTYPE html> <html> <head lang="en ...
北大青鸟 JQuery 制作特效第一章课后简答题
北大青鸟 JQuery 制作特效第一章课后简答题简单三丶打印倒正金字塔直线 <!DOCTYPE html> <html> <head lang="en&q ...
北大青鸟使用JQuery制作特效第一章（上机练习
北大青鸟使用JQuery制作特效第一章(上机练习练习一丶--统计包含"a"或"A"的字符串个数 <!DOCTYPE html> <htm ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...

JQuery六：特效

JQuery六：特效相关推荐

最新文章

热门文章