- 浏览: 482813 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
mrluo735:
明显不对,INOUT参数也可以有多个!
MyBatis 3 中使用存储过程 -
qitianhuoshen:
问一下 如果 配合 datatables的 searchval ...
MyBatis 3 中使用存储过程 -
zhanggang807:
”这就是累积,不会被清理“ 这个例子解决了我疑惑很久的问题
NIO - 使用选择器 -
lIO01:
你能不能别用自己照片当头像?
Spring MVC 中的基于注解的 Controller -
xuxiaoyinliu:
Spring MVC 中的 forward 和 redirect
● hide()
● hide(speed, [callback])
● show()
● show(speed, [callback])
● toggle()
● slideDown(speed, [callback])
● slideToggle(speed, [callback])
● slideUp(speed, [callback])
● fadeIn(speed, [callback])
● fadeOut(speed, [callback])
● fadeTo(speed, opacity, [callback])
● animate(params, options)
● animate(params [, duration[, easing[, callback]]])
● dequeue()
● queue()
● queue(callback)
● queue(queue)
● stop()
/** * 隐藏显示的元素。 * * 这个就是 "hide( speed, [callback] )" 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变 * 任何东西。 * * @return jQuery Object * @owner jQuery Object */ function hide(); // 例子:隐藏所有段落。 $("p").hide();
● hide(speed, [callback])
/** * 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。 * * 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。 * * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast") * 或表示动画时长的毫秒数值(如:1000) * @callback(Function) (可选) 在动画完成时执行的函数,每个元素执行一次 * @return jQuery Object * @owner jQuery Object */ function hide(speed, [callback]); // 例子一:用 600 毫秒的时间将段落缓慢的隐藏。 $("p").hide("slow"); // 例子二:用 200 毫秒将段落迅速隐藏,之后弹出一个对话框。 $("p").hide("fast", function() { alert("Animation Done."); });
● show()
/** * 显示隐藏的匹配元素。 * * 这个就是 "show( speed, [callback] )" 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任 * 何东西。无论这个元素是通过 hide() 方法隐藏的还是在 CSS 里设置了 display:none; 这个方法都将有效。 * * @return jQuery Object * @owner jQuery Object */ function show(); // 例子:显示所有段落。 $("p").show();
● show(speed, [callback])
/** * 显以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。 * * 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。 * * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast") * 或表示动画时长的毫秒数值(如:1000) * @callback(Function) (可选) 在动画完成时执行的函数,每个元素执行一次 * @return jQuery Object * @owner jQuery Object */ function show(speed, [callback]); // 例子一:用缓慢的动画将隐藏的段落显示出来,历时 600 毫秒。 $("p").show("slow"); // 例子二:用迅速的动画将隐藏的段落显示出来,历时 200 毫秒。并在之后执行反馈。 $("p").show("fast", function() { $(this).text("Animation Done!"); }); // 例子三:将隐藏的段落用将近 4 秒的时间显示出来,并在之后执行一个反馈。 $("p").show(4000, function() { $(this).text("Animation Done..."); });
● toggle()
/** * 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 * * @return jQuery Object * @owner jQuery Object */ function toggle(); // 例子:切换所有段落的可见状态。 <p>Hello</p> <p style="display: none">Hello Again</p> $("p").toggle() -> <p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
● slideDown(speed, [callback])
/** * 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。 * * 这个动画效果只调整元素的高度,可以使匹配的元素以 "滑动" 的方式显示出来。 * * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast") * 或表示动画时长的毫秒数值(如:1000) * @callback(Function) (可选) 在动画完成时执行的函数 * @return jQuery Object * @owner jQuery Object */ function slideDown(speed, [callback]); // 例子一:用 600 毫秒缓慢的将段落滑下。 $("p").slideDown("slow"); // 例子二:用 200 毫秒快速将段落滑下,之后弹出一个对话框。 $("p").slideDown("fast", function(){ alert("Animation Done."); });
● slideToggle(speed, [callback])
/** * 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。 * * 这个动画效果只调整元素的高度,可以使匹配的元素以 "滑动" 的方式隐藏或显示。 * * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast") * 或表示动画时长的毫秒数值(如:1000) * @callback(Function) (可选) 在动画完成时执行的函数 * @return jQuery Object * @owner jQuery Object */ function slideToggle(speed, [callback]); // 例子一:用 600 毫秒缓慢的将段落滑上或滑下。 $("p").slideToggle("slow"); // 例子二:用 200 毫秒快速将段落滑上或滑下,之后弹出一个对话框。 $("p").slideToggle("fast", function() { alert("Animation Done."); });
● slideUp(speed, [callback])
/** * 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。 * * 这个动画效果只调整元素的高度,可以使匹配的元素以 "滑动" 的方式隐藏起来。 * * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast") * 或表示动画时长的毫秒数值(如:1000) * @callback(Function) (可选) 在动画完成时执行的函数 * @return jQuery Object * @owner jQuery Object */ function slideUp(speed, [callback]); // 例子一:用 600 毫秒缓慢的将段落滑上。 $("p").slideUp("slow"); // 例子二:用 200 毫秒快速将段落滑上,之后弹出一个对话框。 $("p").slideUp("fast", function() { alert("Animation Done."); });
● fadeIn(speed, [callback])
/** * 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。 * * 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。 * * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast") * 或表示动画时长的毫秒数值(如:1000) * @callback(Function) (可选) 在动画完成时执行的函数 * @return jQuery Object * @owner jQuery Object */ function fadeIn(speed, [callback]); // 例子一:用 600 毫秒缓慢的将段落淡入。 $("p").fadeIn("slow"); // 例子二:用 200 毫秒快速将段落淡入,之后弹出一个对话框。 $("p").fadeIn("fast", function() { alert("Animation Done."); });
● fadeOut(speed, [callback])
/** * 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。 * * 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。 * * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast") * 或表示动画时长的毫秒数值(如:1000) * @callback(Function) (可选) 在动画完成时执行的函数 * @return jQuery Object * @owner jQuery Object */ function fadeOut(speed, [callback]); // 例子一:用 600 毫秒缓慢的将段落淡出。 $("p").fadeOut("slow"); // 例子二:用 200 毫秒快速将段落淡出,之后弹出一个对话框。 $("p").fadeOut("fast", function() { alert("Animation Done."); });
● fadeTo(speed, opacity, [callback])
/** * 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。 * * 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。 * * @speed(String, Number) 三种预定速度之一的字符串("slow", "normal", or "fast") * 或表示动画时长的毫秒数值(如:1000) * @opacity(Number) 要调整到的不透明度值(0到1之间的数字) * @callback(Function) (可选) 在动画完成时执行的函数 * @return jQuery Object * @owner jQuery Object */ function fadeTo(speed, opacity, [callback]); // 例子一:用 600 毫秒缓慢的将段落的透明度调整到 0.66,大约 2/3 的可见度。 $("p").fadeTo("slow", 0.66); // 例子二:用 200 毫秒快速将段落的透明度调整到 0.25,大约 1/4 的可见度,之后弹出一个对话框。 $("p").fadeTo("fast", 0.25, function() { alert("Animation Done."); });
● animate(params, options)
/** * 用于创建自定义动画的函数。 * * 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式 * 属性(如 "height", "top" 或 "opacity")。注意:所有指定的属性必须用骆驼形式,比如用 marginLeft * 代替 margin-left。而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就 * 会从当前的值渐变到指定的值。如果使用的是 "hide", "show" 或 "toggle" 这样的字符串值,则会为该 * 属性调用默认的动画形式。 * * 在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 * "+=" 或 "-=" 来让元素做相对运动。 * * @params(Options) 一组包含作为动画属性和终值的样式属性和及其值的集合 * @options(Options) 一组包含动画选项的值的集合 * 1. duration(String, Number) (默认值: "normal") 三种预定速度之一的字符串("slow", * "normal", or "fast")或表示动画时长的毫秒数值(如:1000) * 2. easing(String) (默认值: "swing") 要使用的擦除效果的名称(需要插件支持)。默认 jQuery * 提供 "linear" 和 "swing" * 3. complete(Function) 在动画完成时执行的函数 * 4. step(Callback) * 5. queue(Boolean) (默认值: true) 设定为 false 将使此动画不进入动画队列(jQuery 1.2中新增) * @return jQuery Object * @owner jQuery Object */ function animate(params, options); // 例子一:第一个按钮按了之后展示了不在队列中的动画。在 div 扩展到 90% 的同时也在增加字体,一旦字体 // 改变完毕后,边框的动画才开始。第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完 // 成后,后一个动画才会开始。 <button id="go1">? Animate Block1</button> <button id="go2">? Animate Block2</button> <div id="block1">Block1</div><div id="block2">Block2</div> $("#go1").click(function() { $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $("#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); // 例子二:用 600 毫秒切换段落的高度和透明度。 $("p").animate({ height: 'toggle', opacity: 'toggle' }, { duration: "slow" }); // 例子三:用 500 毫秒将段落移到 left 为 50 的地方并且完全清晰显示出来(透明度为1)。 $("p").animate({ left: 50, opacity: 'show' }, { duration: 500 }); // 例子四:一个使用 "easein" 函数提供不同动画样式的例子。只有使用了插件来提供这个" easein" 函数, // 这个参数才起作用。 $("p").animate({ opacity: 'show' }, { duration: "slow", easing: "easein" });
● animate(params [, duration[, easing[, callback]]])
/** * 描述同 animate(params, options) * * @params(Options) 一组包含作为动画属性和终值的样式属性和及其值的集合 * @duration(String, Number) (可选) 三种预定速度之一的字符串("slow", "normal", or * "fast")或表示动画时长的毫秒数值(如:1000) * @easing(String) (可选) 要使用的擦除效果的名称(需要插件支持)。默认jQuery提供"linear"和"swing" * @callback(Function) (可选) 在动画完成时执行的函数 * @return jQuery Object * @owner jQuery Object */ function animate(params [, duration[, easing[, callback]]]); // 例子一:点击按钮后 div 元素的几个不同属性一同变化。 <button id="go"> Run</button> <div id="block">Hello!</div> // 在一个动画中同时应用三种类型的效果 $("#go").click(function(){ $("#block").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000 ); }); // 例子二:让指定元素左右移动。 <button id="left">?</button> <button id="right">?</button> <div class="block"></div> $("#right").click(function(){ $(".block").animate({left: '+50px'}, "slow"); }); $("#left").click(function(){ $(".block").animate({left: '-50px'}, "slow"); }); // 例子三:在 600 毫秒内切换段落的高度和透明度。 $("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow"); // 例子四:用 500 毫秒将段落移到 left 为 50 的地方并且完全清晰显示出来(透明度为1)。 $("p").animate({ left: 50, opacity: 'show' }, 500); // 例子五:一个使用 "easein" 函数提供不同动画样式的例子。只有使用了插件来提供这个 "easein" 函数, // 这个参数才起作用。 $("p").animate({ opacity: 'show' }, "slow", "easein");
● dequeue()
/** * 从动画队列中移除一个队列函数。 * * @return jQuery Object * @owner jQuery Object */ function dequeue(); // 例子: <style> div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; } </style> <button>Start</button> <div></div> $("button").click(function() { $("div").animate({left:'+=200px'}, 2000); $("div").animate({top:'0px'}, 600); $("div").queue(function () { $(this).toggleClass("red"); $(this).dequeue(); }); $("div").animate({left:'10px', top:'30px'}, 700); });
● queue()
/** * 返回指向第一个匹配元素的队列(将是一个函数数组)。 * * @return Array<Function> * @owner jQuery Object */ function queue(); // 例子:显示队列长度。 <style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } span { color:red; } </style> <button id="show">Show Length of Queue</button> <span></span> <div></div> $("#show").click(function () { var n = $("div").queue("fx"); $("span").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").slideToggle(1000); $("div").slideToggle("fast"); $("div").animate({left:'-=200'},1500); $("div").hide("slow"); $("div").show(1200); $("div").slideUp("normal", runIt); } runIt();
● queue(callback)
/** * 在匹配的元素的动画队列中添加一个函数。 * * @callback(Function) 要添加进队列的函数 * @return jQuery Object * @owner jQuery Object */ function queue(callback); // 例子:插入一个自定义函数,如果函数执行后要继续队列,则执行 jQuery(this).dequeue();。 <style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> Click here... <div></div> $(document.body).click(function() { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({left:'-=200'},500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp(); });
● queue(queue)
/** * 将匹配元素的动画队列用新的一个队列来代替(函数数组)。 * * @queue(Array<Function>) 用于替换的队列。所有函数都有同一个参数,这个值与 queue(callback) 相同 * @return queue * @owner jQuery Object */ function queue(queue); // 例子:通过设定队列数组来删除动画队列。 <style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> <button id="start">Start</button> <button id="stop">Stop</button> <div></div> $("#start").click(function () { $("div").show("slow"); $("div").animate({left:'+=200'},5000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({left:'-=200'},1500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp(); }); $("#stop").click(function () { $("div").queue("fx", []); $("div").stop(); });
● stop()
/** * 停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画,他们将被马上执行。 * * @queue(Array<Function>) 用于替换的队列。所有函数都有同一个参数,这个值与 queue(callback) 相同 * @return jQuery Object * @owner jQuery Object */ function stop(); // 例子:点击 Go 之后开始动画,点 Stop 之后会在当前位置停下来。 <button id="go">Go</button> <button id="stop">STOP!</button> <div class="block"></div> <button id="go">Go</button> <button id="stop">STOP!</button> <div class="block"></div> // 开始动画 $("#go").click(function() { $(".block").animate({left: '+200px'}, 5000); }); // 当点击按钮后停止动画 $("#stop").click(function(){ $(".block").stop(); });
发表评论
-
Node 的安装
2012-12-28 20:51 1444该篇文章讨论到是 linux 版的 node ... -
Web 前端经常用到的 JSON 对象,JSON 字符串,QueryString 之间的转换
2011-12-17 14:17 0在做 Web 前端时,经常要在 JSON 对象 ... -
jQuery 的原型关系图,让你快速对 jQuery 有个整体的把握
2010-07-12 20:07 4337若干个月前,在博客园中看到一篇文章,内容很简单 ... -
26 个 JQuery 使用小技巧(jQuery tips, tricks & solutions)
2010-03-01 17:17 3661The use of the jQuery l ... -
A Plugin Development Pattern For jQuery
2009-12-31 17:04 1268This article comes from http:// ... -
javascript 动态创建 <script> 节点所想到的其它问题
2009-12-12 22:12 5006最近公司的项目中,有一个模块需要调用集团提供的 ... -
JavaScript 面向对象程序设计
2009-09-05 14:18 1149近期在网上 ... -
jQuery 学习十四(工具函数)
2009-05-03 23:17 2300● jQuery.boxModel ... -
jQuery 学习十二(事件)
2009-05-01 16:42 4516● ready(fn) /** ... -
jQuery 学习十一(CSS)
2009-05-01 13:49 1583● css(name) /** * 访问第一 ... -
jQuery 学习十(文档处理)
2009-04-27 20:28 1838● append(content) /** ... -
jQuery 学习九(筛选)
2009-04-21 18:46 2056● eq(index) /** * 获取第 ... -
jQuery 学习八(属性)
2009-04-14 20:11 3675● attr(name) /** * 取得第 ... -
jQuery 学习七(选择器)
2009-04-11 17:36 2448● 在指定的上下文搜索 /** * 在指定的 ... -
jQuery 学习六(多库共存)
2009-04-11 14:00 2217● jQuery.noConflict( ... -
jQuery 学习五(插件机制)
2009-04-11 10:41 1716● jQuery.extend(object) ... -
jQuery 学习四(数据缓存)
2009-04-10 19:59 2120● data(name) /** * 返回元 ... -
jQuery 学习三(对象访问)
2009-04-10 19:08 1696● get() /** * 通过 CSS 选 ... -
jQuery 学习二(核心函数)
2009-04-09 18:42 1934● jQuery(expression, ... -
jQuery 学习一(基础知识)
2009-03-30 16:45 1513● The jQuery wrapper ...
相关推荐
jQuery学习动画效果基础
使用jQuery实现的效果,主要是调用js实现一些特效,有兴趣可以学习。。
这是一个学习jQuery的好资料,里面总结了很多学习jQuery窗口效果的东西
jQuery实现放大镜效果源码 程序介绍了如何使用jQuery放大镜插件,可以根据自己的需要定制插件的属性。 程序功能比较简单,插件的源代码值得学习。详细请查看程序源代码。
jquery效果,jquery学习,jquery培训课程,帮助你成为jquery高手
jquery实现动态背景效果,供大家一起参考学习。
这是一部非常好用的、快速的jquery学习手册,尤其是对初学者,里面包括核心、属性、选择器、事件、css、文档处理、效果、筛选等几大部分。
没事的时候看看这个里里有实例可以学习。50个jquery 9-手风琴效果 demo 7--选项卡切换tab_panel_animation 42 客户管理界面 -jquery_air 34-表格 tablesorter里面有五十个实例供大家学习。
这是本人自己写的用jquery实现星级评分效果,有兴趣的可以下载下来我们一起学习。
摘要:jQuery 入门指南 学习文档 范例打包 效果应用 jQuery_api,此包在手,jQuery学习无忧。
这里是一个比较简单的用jQuery实现定位滚动导航效果的代码,如果需要可以下载学习。
jquery图片加载中效果,需要的人可以下载下来。学习学习
JQuery新手学习给力文档,包含基础语法讲解、一些效果制作等必备知识。
理论篇:对选择器、事件、常用函数方法、外观效果、查找筛选、文档处理、Ajax处理的基础知识,以及《锋利的JQUERY》读书笔记精华完整版。 实践篇:Tab菜单栏源码、手风琴菜单源码、圆角效果源码、网页弹出对话框...
对于前段的学习,一些简单的理解,希望可以帮助你们,Jquery过滤和悬停效果的展示,效果还挺明显的,适合学习,在此拿来分享给大家,be free
对于初学jquery的学习者,一个插件实现的幻灯。
从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会...
jquery下拉选择效果,供大家一起共同分享学习。
jQuery仿淘宝图片滚动效果,供大家一起共同分享学习。