一、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();
});
发表评论
-
定义和扩展jquery 自定义函数
2011-09-11 10:20 14331、扩展jQuery自身之全局函数 jQuery.log ... -
jquery__事件(页面载入)
2011-09-11 09:19 453一、jQuery___事件(页面载入) 返回值:jQueryr ... -
jquery__事件(事件处理)
2011-09-11 09:18 453一、jQuery___事件(事件处 ... -
jquery__事件(事件处理)
2011-09-11 09:16 487一、jQuery___事件(事件处 ... -
jQuery对象与dom对象相互转换
2011-09-08 16:41 474刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对 ... -
潜力艺术-jquery
2011-09-08 16:13 535相信很多朋友跟我一样,做两年的程序员,经常到网上去盗用别人的精 ... -
(function($){...})(jQuery)是什么意思
2011-09-08 14:49 641这里实际上是匿名函数f ... -
jquery中this与$(this)的用法区别
2011-09-08 14:46 798jquery中this与$(this)的用法区别.先看以下代码 ... -
插件的写法
2011-09-08 11:45 660看官方写得插件很爽吧,想想 ,要是哪天自己也能写个插件该多好。 ... -
javascript,jquery(闭包概念)
2011-09-08 11:06 542偶尔听人说javascript闭包 ...
相关推荐
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