jquery动画函数(show、speed、hidde、toggle)用法

发布时间:2020-08-14编辑:脚本学堂
有关jquery动画函数的用法,常用的jquery动画函数,包括show、speed、hidde、toggle、animate方法等。

jquery动画函数

show()
显示隐藏的匹配元素。
这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。
无论这个元素是通过hide()方法隐藏的还是在css里设置了display:none;,这个方法都将有效。
返回值:jquery

显示所有段落
html 代码:
 

<p style="display: none">hello</p>

jquery 代码:
 

$("p").show()

show(speed,[callback])
以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。
返回值:jquery
参数
speed (string,number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (function) : (optional) 在动画完成时执行的函数,每个元素执行一次。

例子,用缓慢的动画将隐藏的段落显示出来,历时600毫秒。
html 代码:
 

<p style="display: none">hello</p>

jquery 代码:
 

$("p").show("slow");
 

用迅速的动画将隐藏的段落显示出来,历时200毫秒。并在之后执行反馈!

html 代码:
 

<p style="display: none">hello</p>

jquery 代码:
 

$("p").show("fast",function(){
$(this).text("animation done!");
});
将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。
}

html 代码:
 

<p style="display: none">hello</p>

jquery 代码:
 

$("p").show(4000,function(){
$(this).text("animation done...");
});

hide()
隐藏显示的元素
这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。
返回值:jquery

例子,隐藏所有段落

jquery 代码:
$("p").hide()
hide(speed,[callback])
以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。
返回值:jquery
参数
speed (string,number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (functionfunction) : (optional) 在动画完成时执行的函数,每个元素执行一次。

例子, 用600毫秒的时间将段落缓慢的隐藏
jquery 代码:
 

$("p").hide("slow");

用200毫秒将段落迅速隐藏,之后弹出一个对话框
jquery 代码:
 

$("p").hide("fast",function(){
alert("animation done.");
});

toggle()
切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
返回值:jquery

示例
切换所有段落的可见状态。

html 代码:
 

<p>hello</p><p style="display: none">hello again</p>

jquery 代码:
 

$("p").toggle()


结果:
<p tyle="display: none">hello</p><p style="display: block">hello again</p>

jquery中的滑动

slidedown(speed,[callback])
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。
返回值:jquery

参数
speed (string,number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (functionfunction) : (可选) 在动画完成时执行的函数

示例
用600毫秒缓慢的将段落滑下
jquery 代码:
 

$("p").slidedown("slow");

用200毫秒快速将段落滑下,之后弹出一个对话框
 

<p style="display: none;width:200px;height:200px;background-color:red;">hello</p>

jquery 代码:
 

}         $("p").slidedown("fast",function(){
alert("animation done.");
});

slideup(speed,[callback])
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。
返回值:jquery
参数
speed (string,number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (function) : (可选) 在动画完成时执行的函数

示例
用600毫秒缓慢的将段落滑上
jquery 代码:
 

$("p").slideup("slow");

用200毫秒快速将段落滑上,之后弹出一个对话框
jquery 代码:
 

$("p").slideup("fast",function(){
alert("animation done.");
});

slidetoggle(speed,[callback])
通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。
返回值:jquery

参数
speed (string,number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (function) : (可选) 在动画完成时执行的函数

示例
用600毫秒缓慢的将段落滑上或滑下
jquery 代码:
 

$("p").slidetoggle("slow");

用200毫秒快速将段落滑上或滑下,之后弹出一个对话框
jquery 代码:
 

$("p").slidetoggle("fast",function(){
alert("animation done.");
});

jquery中淡入淡出效果
fadein(speed,[callback])
通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
返回值:jquery

参数
speed (string,number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (function) : (optional) (可选) 在动画完成时执行的函数

示例
用600毫秒缓慢的将段落淡入
jquery 代码:
 

$("p").fadein("slow");
 

用200毫秒快速将段落淡入,之后弹出一个对话框

jquery 代码:
 

$("p").fadein("fast",function(){
alert("animation done.");
});
 

fadeout(speed,[callback])
通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
返回值:jquery

参数
speed (string,number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (function) :(可选) 在动画完成时执行的函数
示例
用600毫秒缓慢的将段落淡出

jquery 代码:
 

$("p").fadeout("slow");
 

用200毫秒快速将段落淡出,之后弹出一个对话框

jquery 代码:
 

$("p").fadeout("fast",function(){
alert("animation done.");
});
 

fadeto(speed,opacity,[callback])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
返回值:jquery

参数
speed (string,number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
opacity (number) : 要调整到的不透明度值(0到1之间的数字).
callback (function) : (可选) 在动画完成时执行的函数

示例
用600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度
jquery 代码:
 

$("p").fadeto("slow", 0.66);
 

用200毫秒快速将段落的透明度调整到0.25,大约1/4的可见度,之后弹出一个对话框

jquery 代码:
 

$("p").fadeto("fast", 0.25, function(){
alert("animation done.");
});