jquery
jquery效果
jquery 给我们封装了很多动画效果,最为常见的如下:
- 显示隐藏:show() / hide() / toggle() ;
- 滑入滑出:slideDown() / slideUp() / slideToggle() ;
- 淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定义动画:animate() ;
1、显示与隐藏
1).显示 show([speed,callback])
显示被选的元素
参数:
-
spend:可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
可能的值:毫秒 (比如 1500)
“slow”
“normal”
“fast”
在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。**
**- -
callback:可选。show 函数执行完之后,要执行的函数。
除非设置了 speed 参数,否则不能设置该参数。**
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){ //点击按钮
$("p").show(); //p元素显示
});
</script>
提示:如果元素已经是完全可见,则该效果不产生任何变化,除非规定了 callback 函数。
2).隐藏 hide[speed,callback])
如果被选的元素已被显示,则隐藏该元素。
参数:
**
-
spend:可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
可能的值:毫秒 (比如 1500)
“slow”
“normal”
“fast”
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。**
**- -
callback:可选。hide函数执行完之后,要执行的函数。
除非设置了 speed 参数,否则不能设置该参数。**
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){ //点击按钮
$("p").hide(); //p元素隐藏
});
</script>
3)切换 toggle(speed,callback,switch)
toggle() 方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
参数:
-
spend:可选。规定元素从可见到隐藏的速度(或者相反)。默认为 “normal”。
可能的值:
毫秒 (比如 1500)
“slow”
“normal”
“fast”
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。
如果设置此参数,则无法使用 switch 参数。**
**- -
callback:可选。toggle 函数执行完之后,要执行的函数。
除非设置了 speed 参数,否则不能设置该参数。** -
switch:可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
True - 显示所有元素
False - 隐藏所有元素
如果设置此参数,则无法使用 speed 和 callback 参数。
<script type="text/javascript">
$(document).ready(function(){ //点击按钮
$(".btn1").click(function(){
$("p").toggle(); //切换显示/隐藏
});
});
</script>
2、滑入与滑出
(1)slideDown()
定义:slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。
语法:slideDown(speed,callback);
参数:
-
spend:可选。规定元素从可见到隐藏的速度(或者相反)。默认为 “normal”。
可能的值:
毫秒 (比如 1500)
“slow”
“normal”
“fast”
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度。
**- -
callback:可选。slideDown 函数执行完之后,要执行的函数。
除非设置了 speed 参数,否则不能设置该参数。
//以滑动方式显示的 <p> 元素:
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideDown();
});
});
</script>
提示:如果元素已经是完全可见,则该效果不产生任何变化,除非规定了 callback 函数。
(2)slideUp()
定义:slideUp() 通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。
语法:slideUp(speed,callback);
参数:
-
spend:可选。规定元素从可见到隐藏的速度(或者相反)。默认为 “0”。
可能的值:
毫秒 (比如 1500)
“slow”
“normal”
“fast”
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度。
**- -
callback:可选。slideUp函数执行完之后,要执行的函数。
除非设置了 speed 参数,否则不能设置该参数。
//以滑动方式隐藏的 <p> 元素:
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp();
});
});
</script>
提示:如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。
(3)slideToggle()
定义:slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。
如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。
语法:slideToggle(speed,callback);
参数:
-
spend:可选。规定元素从可见到隐藏的速度(或者相反)。默认为 “normal”。
可能的值:毫秒 (比如 1500)
“slow”
“normal”
“fast”
在设置速度的情况下,元素在切换过程中,会逐渐地改变其高度(这样会创造滑动效果)。
**- -
callback:可选。toggle 函数执行完之后,要执行的函数。
除非设置了 speed 参数,否则不能设置该参数。
//通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素:
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideToggle();
});
});
</script>