首页 > 代码库 > Jquery效果函数
Jquery效果函数
jQuery 效果函数
方法 | 描述 |
---|---|
animate() | 对被选元素应用“自定义”的动画 |
clearQueue() | 对被选元素移除所有排队的函数(仍未运行的) |
delay() | 对被选元素的所有排队函数(仍未运行)设置延迟 |
dequeue() | 运行被选元素的下一个排队函数 |
fadeIn() | 逐渐改变被选元素的不透明度,从隐藏到可见 |
fadeOut() | 逐渐改变被选元素的不透明度,从可见到隐藏 |
fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
hide() | 隐藏被选的元素 |
queue() | 显示被选元素的排队函数 |
show() | 显示被选的元素 |
slideDown() | 通过调整高度来滑动显示被选元素 |
slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
slideUp() | 通过调整高度来滑动隐藏被选元素 |
stop() | 停止在被选元素上运行动画 |
toggle() | 对被选元素进行隐藏和显示的切换 |
2.jQuery 效果 - animate() 方法
实例
改变 "div" 元素的高度:
$(".btn1").click(function(){ $("#box").animate({height:"300px"});
});
定义和用法
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 " padding: 0px;">语法 1
$(selector).animate(styles,speed,easing,callback)
参数 | 描述 |
---|---|
styles | 必需。规定产生动画效果的 CSS 样式和值。 可能的 CSS 样式值(提供实例):
注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。 |
speed | 可选。规定动画的速度。默认是 "normal"。 可能的值:
|
easing | 可选。规定在不同的动画点中设置动画速度的 easing 函数。 内置的 easing 函数:
扩展插件中提供更多 easing 函数。 |
callback | 可选。animate 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 。 |
语法 2
$(selector).animate(styles,options)
参数 | 描述 |
---|---|
styles | 必需。规定产生动画效果的 CSS 样式和值(同上)。 |
options | 可选。规定动画的额外选项。 可能的值:
|
3.jQuery 效果 - clearQueue() 方法
实例
停止当前正在运行的动画:
$("#stop").click(function(){ $("#box").clearQueue();
});
定义和用法
clearQueue() 方法停止队列中所有仍未执行的函数。
与 stop() 方法不同,(只适用于动画),clearQueue() 能够清除任何排队的函数(通过 .queue() 方法添加到通用 jQuery 队列的任何函数)。
语法
$(selector).clearQueue(queueName)
参数 | 描述 |
---|---|
queueName | 可选。规定要停止的队列的名称。 默认是 "fx",标准效果队列。 |
4.jQuery 效果 - fadeIn() 方法
实例
使用淡入效果来显示一个隐藏的 <p> 元素:
$(".btn2").click(function(){ $("p").fadeIn();
});
定义和用法
fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。
语法
$(selector).fadeIn(speed,callback)
参数 | 描述 |
---|---|
speed | 可选。规定元素从隐藏到可见的速度。默认为 "normal"。 可能的值:
在设置速度的情况下,元素从隐藏到可见的过程中,会逐渐地改变其透明度(这样会创造淡入效果)。 |
callback | 可选。fadeIn 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
提示和注释
提示:如果元素已经显示,则该效果不产生任何变化,除非规定了 callback 函数。
注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。
5.jQuery 效果 - fadeOut() 方法
实例
使用淡出效果来隐藏一个 <p> 元素:
$(".btn1").click(function(){ $("p").fadeOut();
});
定义和用法
fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。
语法
$(selector).fadeOut(speed,callback)
参数 | 描述 |
---|---|
speed | 可选。规定元素从可见到隐藏的速度。默认为 "normal"。 可能的值:
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其透明度(这样会创造淡出效果)。 |
callback | 可选。fadeOut 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
提示和注释
提示:如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。
6.jQuery 效果 - fadeTo() 方法
实例
使用淡出效果来隐藏一个 <p> 元素:
$(".btn1").click(function(){ $("p").fadeTo(1000,0.4);
});
定义和用法
fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
语法
$(selector).fadeTo(speed,opacity,callback)
参数 | 描述 |
---|---|
speed | 可选。规定元素从当前透明度到指定透明度的速度。 可能的值:
|
opacity | 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。 |
callback | 可选。fadeTo 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
7.jQuery 效果 - hide() 方法
实例
隐藏可见的 <p> 元素:
$(".btn1").click(function(){ $("p").hide();
});
定义和用法
如果被选的元素已被显示,则隐藏该元素。
语法
$(selector).hide(speed,callback)
参数 | 描述 |
---|---|
speed | 可选。规定元素从可见到隐藏的速度。默认为 "0"。 可能的值:
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。 |
callback | 可选。hide 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
提示和注释
提示:如果元素已经是完全可见,则该效果不产生任何变化,除非规定了 callback 函数。
8.jQuery 效果 - show() 方法
实例
显示出隐藏的 <p> 元素。
$(".btn2").click(function(){ $("p").show();
});
定义和用法
如果被选元素已被隐藏,则显示这些元素:
语法
$(selector).show(speed,callback)
参数 | 描述 |
---|---|
speed | 可选。规定元素从隐藏到完全可见的速度。默认为 "0"。 可能的值:
在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。 |
callback | 可选。show 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
提示和注释
提示:如果元素已经是完全可见,则该效果不产生任何变化,除非规定了 callback 函数。
注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。
9.jQuery 效果 - slideDown() 方法
实例
以滑动方式显示隐藏的 <p> 元素:
$(".btn2").click(function(){ $("p").slideDown();
});
定义和用法
slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。
语法
$(selector).slideDown(speed,callback)
参数 | 描述 |
---|---|
speed | 可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。 可能的值:
在设置速度的情况下,元素从隐藏到可见的过程中,会逐渐地改变其高度。 |
callback | 可选。slideDown 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
提示和注释
提示:如果元素已经是完全可见,则该效果不产生任何变化,除非规定了 callback 函数。
注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。
10.jQuery 效果 - slideToggle() 方法
实例
通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素:
$(".btn1").click(function(){ $("p").slideToggle();
});
定义和用法
slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。
如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。
语法
$(selector).slideToggle(speed,callback)
参数 | 描述 |
---|---|
speed | 可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。 可能的值:
在设置速度的情况下,元素在切换的过程中,会逐渐地改变其高度(这样会创造滑动效果)。 |
callback | 可选。toggle 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
提示和注释
提示:如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。
11.jQuery 效果 - slideUp() 方法
实例
以滑动方式隐藏 <p> 元素:
$(".btn1").click(function(){ $("p").slideUp();
});
定义和用法
通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。
语法
$(selector).slideUp(speed,callback)
参数 | 描述 |
---|---|
speed | 可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "normal"。 可能的值:
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度(这样会创造滑动效果)。 |
callback | 可选。slideUp 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
提示和注释
提示:如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。
12.jQuery 效果 - stop() 方法
实例
停止当前正在运行的动画:
$("#stop").click(function(){ $("#box").stop();
});
定义和用法
stop() 方法停止当前正在运行的动画。
语法
$(selector).stop(stopAll,goToEnd)
参数 | 描述 |
---|---|
stopAll | 可选。规定是否停止被选元素的所有加入队列的动画。 |
goToEnd | 可选。规定是否允许完成当前的动画。 该参数只能在设置了 stopAll 参数时使用。 |
13.jQuery 效果 - toggle() 方法
实例
切换 <p> 元素的显示与隐藏状态:
$(".btn1").click(function(){ $("p").hide();
});
定义和用法
toggle() 方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
语法
$(selector).toggle(speed,callback,switch)
参数 | 描述 |
---|---|
speed | 可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。 可能的值:
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。 如果设置此参数,则无法使用 switch 参数。 |
callback | 可选。toggle 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
switch | 可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
如果设置此参数,则无法使用 speed 和 callback 参数。 |
提示和注释
注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。
Jquery效果函数