- 浏览: 321219 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (178)
- 程序人生 (9)
- 工作总结 (16)
- 我的功能实现 (8)
- J2SE总结 (8)
- 面试中用到的 (10)
- struts2 (15)
- jsp (4)
- js (21)
- 数据库 (7)
- 数据结构和算法 (3)
- jQuery (18)
- hibernate (3)
- web service (2)
- spring (1)
- mySQL (7)
- 服务器 (1)
- 缓存 (2)
- nginx (1)
- jquery.ui (1)
- 各类标签(Date转 string) (1)
- Raphael (3)
- maven (2)
- 大型分布式网站架构设计 (2)
- linux (1)
- java易犯错误 (1)
- 优化 (4)
最新评论
-
15381049808:
楼主写的很赞 我对中间的批量发送拿过来现在还好用 受益匪浅
java实现邮件抄送,密送,多个附件发送 -
猜猜猜:
你这不是选择了语言之后总是跳到同一个页面吗?比如登录页面,选择 ...
struts2国际化——实例 -
itshu:
struts2国际化——实例 -
itshu:
[flash=200,200][url][img][list] ...
struts2国际化——实例 -
ZP0605:
com.asia.home.cn这个包名好熟悉
struts2拦截器管理日志
一、jQuery___效果(自定义效果)
animate(params, [duration], [easing], [callback])
概述
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。
jQuery 1.3中,如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
参数
paramsOptions
一组包含作为动画属性和终值的样式属性和及其值的集合
duration (可选)String,Number
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing (可选)String
要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
callback (可选)Function
在动画完成时执行的函数
示例
描述:
点击按钮后div元素的几个不同属性一同变化
HTML 代码:
<button id="go"> Run</button>
<div id="block">Hello!</div>
jQuery 代码:
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
描述:
让指定元素左右移动
HTML 代码:
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
jQuery 代码:
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
描述:
在600毫秒内切换段落的高度和透明度
jQuery 代码:
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
描述:
用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)
jQuery 代码:
$("p").animate({
left: 50, opacity: 'show'
}, 500);
描述:
一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。
jQuery 代码:
$("p").animate({
opacity: 'show'
}, "slow", "easein");
返回值:jQueryanimate(params, options)
概述
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。
参数
paramsOptions
一组包含作为动画属性和终值的样式属性和及其值的集合
optionsOptions
一组包含动画选项的值的集合。
选项
durationString,Number
(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easingString
(默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
completeFunction
在动画完成时执行的函数
stepCallback
queueBoolean
(默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)
示例
描述:
第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始。
HTML 代码:
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代码:
$("#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);
});
描述:
第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完成后,后一个动画才会开始.
HTML 代码:
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代码:
$("#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毫秒切换段落的高度和透明度
jQuery 代码:
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, { duration: "slow" });
描述:
用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)
jQuery 代码:
$("p").animate({
left: 50, opacity: 'show'
}, { duration: 500 });
描述:
一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。
jQuery 代码:
$("p").animate({
opacity: 'show'
}, { duration: "slow", easing: "easein" });
stop([clearQueue], [gotoEnd])
概述
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行
参数
clearQueue (可选)Boolean
如果设置成true,则清空队列。可以立即结束动画。
gotoEnd (可选)Boolean
让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。
示例
描述:
点击Go之后开始动画,点Stop之后会在当前位置停下来
HTML 代码:
<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>
jQuery 代码:
// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});
animate(params, [duration], [easing], [callback])
概述
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。
jQuery 1.3中,如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
参数
paramsOptions
一组包含作为动画属性和终值的样式属性和及其值的集合
duration (可选)String,Number
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing (可选)String
要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
callback (可选)Function
在动画完成时执行的函数
示例
描述:
点击按钮后div元素的几个不同属性一同变化
HTML 代码:
<button id="go"> Run</button>
<div id="block">Hello!</div>
jQuery 代码:
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
描述:
让指定元素左右移动
HTML 代码:
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
jQuery 代码:
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
描述:
在600毫秒内切换段落的高度和透明度
jQuery 代码:
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
描述:
用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)
jQuery 代码:
$("p").animate({
left: 50, opacity: 'show'
}, 500);
描述:
一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。
jQuery 代码:
$("p").animate({
opacity: 'show'
}, "slow", "easein");
返回值:jQueryanimate(params, options)
概述
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。
参数
paramsOptions
一组包含作为动画属性和终值的样式属性和及其值的集合
optionsOptions
一组包含动画选项的值的集合。
选项
durationString,Number
(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easingString
(默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
completeFunction
在动画完成时执行的函数
stepCallback
queueBoolean
(默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)
示例
描述:
第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始。
HTML 代码:
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代码:
$("#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);
});
描述:
第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完成后,后一个动画才会开始.
HTML 代码:
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代码:
$("#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毫秒切换段落的高度和透明度
jQuery 代码:
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, { duration: "slow" });
描述:
用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)
jQuery 代码:
$("p").animate({
left: 50, opacity: 'show'
}, { duration: 500 });
描述:
一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。
jQuery 代码:
$("p").animate({
opacity: 'show'
}, { duration: "slow", easing: "easein" });
stop([clearQueue], [gotoEnd])
概述
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行
参数
clearQueue (可选)Boolean
如果设置成true,则清空队列。可以立即结束动画。
gotoEnd (可选)Boolean
让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。
示例
描述:
点击Go之后开始动画,点Stop之后会在当前位置停下来
HTML 代码:
<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>
jQuery 代码:
// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});
引用
发表评论
-
页面延迟加载,即分屏显示
2013-05-14 09:13 7166页面延迟加载,即分屏显示,用户滚动页面,切换页面时显示当前屏幕 ... -
js查询前三个月的时间
2013-01-08 15:17 4884import java.util.Calendar; impo ... -
jquery 操作select
2013-01-08 15:16 751$("#year_val option[value= ... -
去掉除当前obj之外所有文字的背景色
2012-10-09 08:49 896function removeColor(obj,color) ... -
删除所有tr
2012-09-17 12:15 964//删除已有的tr var trLeng ... -
jquery删除当前行,只需传this,即可
2012-08-27 09:44 29099<tr><td><input t ... -
jquery验证存在多个相同name的属性
2012-06-01 13:53 1257存在多个input 名字为paif ... -
ajax对action json串操作(可操作大量数据,常用于页面数据加载,如分页)
2012-05-29 10:51 13161:js <script type=" ... -
jquery对checkbox,select的操作
2012-05-29 09:54 10331: var readType = $("#rea ... -
jquery实现动态添加一行,删除一行。
2012-05-05 16:04 9464<!DOCTYPE html PUBLIC " ... -
ajax提交url 与ajax提交表单的比较
2012-04-17 10:31 95131:ajax自已构造一个url,这种方式传参数要用Data,不 ... -
jquery中ajax传一串参数到后台
2012-01-05 13:32 1248url:"<%=basePath%>ad ... -
jquery__事件(事件处理)
2011-07-21 14:05 1071[size=medium][/size] 引用一、jQuer ... -
jquery__事件(页面载入)
2011-07-21 10:54 1361[size=medium][/size] 引用一、jQuer ... -
jquery__效果(淡入淡出效果)
2011-07-21 10:00 1331[size=medium][/size] 引用一、jQuer ... -
jquery__效果(滑动效果)
2011-07-21 09:52 3193[size=medium][/size]引用 一、jQuer ... -
jquery__效果(基本效果)
2011-07-21 09:43 929引用 [size=medium][/size]一、jQuer ...
相关推荐
101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝...
jQuery自定义数字滚动效果代码
jQuery自定义添加标签 仿新浪 仿大街网的添加自定义标签和换一换 收起展开推荐标签效果
◦2)、对于每级节点最多一百左右,但总节点数几千甚至几万,且不是全部展开的数据,一次性加载的效果最明显,速度非常快。 ◦3)、对于某一级节点数就多达几千的情况 延迟加载无效,这种情况建议考虑分页异步加载。 ...
jQuery自定义简单清爽的confirm确认对话框效果
//width:400, //height:300, //pic:'water-drop.png',//下雨图片 默认为water-drop.png //speed:1000, //雨速 //num:100, //雨滴的密集度 //dir:['right',160], //雨的飘向 默认为向右飘 雨滴的偏差 ...
多个插件交互起来的jquery鼠标自定义滚动条效果,支持鼠标向左或者向下滑动滚动
类似微信公众号中的自定义菜单的添加和信息的添加,可以增加和设置菜单的链接等信息
jQuery自定义方向网页气泡提示框代码 jQuery+grumble.js自定义方向网页气泡提示框代码是一款可以将提示框放到它所围绕元素的任意角度的位置,多个grumble可以通过FX队列实现动画效果。
这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html,十分灵活...另外最重要的一个特点是,它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果,挺酷的。
jQuery支持多种切换效果的CSS3焦点图代码,支持自定义切换效果。兼容主流浏览器
jQuery自定义表单选择框效果改变平淡无奇的下拉列表.zip
jQuery实现可以拖动及查看自定义坐标刻度尺效果.zip
DropKick 可用来对下列列表的样式进行自定义,效果很炫。比较纠结的是对 IE 不支持。 标签:DropKick
自定义jquery-wizard插件; 点击wizard.html查看效果;
jquery全屏实现滑动多种自定义效果源码下载 jquery全屏实现滑动多种自定义效果源码下载
jQuery自定义区域的拖动效果,同样是基于jQuery UI实现的网页交互特效,可以让网页层中的某个DIV在横向、竖向及指定区域范围内拖动,比如沿X轴拖动时,被拖动的层是不能在Y方向上拖动的;另外一种还可以在网页中任意...
简单实现依赖于jQuery自定义快捷的炫酷导航条效果,样式效果完全自定义。^_^ 来一起感受它的魅力吧! 1.技术点 两个个鼠标事件: onmouseover:鼠标移到指定对象上时触发; onmouseout:鼠标离开指定时触发; 2...
jQuery自定义多选下拉框、带搜索过滤效果.zip