jQuery之效果方法

jQuery隐藏和显示

制作隐藏、显示、切换、滑动、淡入淡出，以及动画。
jQuery hide()和show()方法
语法:

1 2	$(selector).hide(speed,callback); $(selector).show(speed,callback);

实例:

$("#hide").click(function(){
    $("p").hide();
});
$("#show").click(function(){
    $("p").show();
});

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
实例:

1
2
3

$("button").click(function(){
    $("p").hide(1000);
});

jQuery toggle()方法
语法:

1	$(selector).toggle(speed,callback);

通过jquery，您可以用toggle()方法来切换hide()和show
()方法。显示被隐藏的元素，并隐藏已显示的元素：

1
2
3

$("button").click(function(){
    $("p").toggle();
});

jQuery淡入淡出

jQuery Fading方法
fadeIn() fadeOut() fadeToggle() fadeTo()
jQuery fadeIn()方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:

1	$(selector).fadeIn(speed,callback);

实例:

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

jQuery fadeOut()方法

jQuery fadeOut() 方法用于淡出可见元素。
语法:

1	$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

jQuery fadeToggle()方法
jQuery 教程
jQuery 教程
jQuery 简介
jQuery 安装
jQuery 语法
jQuery 选择器
jQuery 事件

jQuery 效果
jQuery 隐藏/显示
jQuery 淡入淡出
jQuery 滑动
jQuery 动画
jQuery 停止动画
jQuery Callback
jQuery 链

jQuery HTML
jQuery 捕获
jQuery 设置
jQuery 添加元素
jQuery 删除元素
jQuery CSS 类
jQuery css() 方法
jQuery 尺寸

jQuery 遍历
jQuery 遍历
jQuery 祖先
jQuery 后代
jQuery 同胞
jQuery 过滤

jQuery Ajax
jQuery AJAX 简介
jQuery load() 方法
jQuery get()/post() 方法

jQuery 其他
jQuery noConflict() 方法
jQuery JSONP

jQuery 实例
jQuery 实例

jQuery 参考手册
jQuery 选择器
jQuery 事件方法
jQuery 效果方法
jQuery HTML / CSS 方法
jQuery 遍历方法
jQuery AJAX 方法
jQuery 杂项方法
jQuery 属性

jQuery 插件
jQuery Validate
jQuery Accordion
jQuery Autocomplete
jQuery Message
jQuery 密码验证
jQuery Prettydate
jQuery Tooltip
jQuery Treeview
← jQuery 效果 – 隐藏和显示 jQuery 效果 – 滑动 →
jQuery 效果 - 淡入淡出
通过 jQuery，您可以实现元素的淡入淡出效果。
点击展示淡入/淡出面板
实例
jQuery fadeIn()
演示 jQuery fadeIn() 方法。
jQuery fadeOut()
演示 jQuery fadeOut() 方法。
jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。
jQuery fadeTo()
演示 jQuery fadeTo() 方法。
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
实例
$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3”).fadeIn(3000);
});

尝试一下 »

jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
实例
$(“button”).click(function(){
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3”).fadeOut(3000);
});

尝试一下 »

jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:

1	$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo()方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:

1	$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：
实例:

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

jQuery滑动

jQuery 滑动方法可使元素上下滑动。
slideDown() slideUp() slideToggle()
jQuery slideDown()方法用于向下滑动元素。
语法:

1	$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：
实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

jQuery slideUp() 方法用于向上滑动元素。
语法:

1	$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
}
</style>
</head>
<body>
 
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

jQuery slideToggle()方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
语法:

1	$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>

</body>
</html>

jQuery动画

animate()方法
jQuery animate() 方法用于创建自定义动画。
语法:

1	$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把

元素往右边移动了 250 像素：
实例:

1
2
3

$("button").click(function(){
  $("div").animate({left:'250px'});
});

jQuery animate()-操作多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

注意：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jquery.com 下载颜色动画插件。
jQuery animate()-使用相对值
可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
实例:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

jQuery animate()-使用预定义的值
您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”：
实例:

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

jQuery animate()-使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用。
实例:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

jQuery 停止动画

jQuery stop()方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:

1	$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：
实例:

1
2
3

$("#stop").click(function(){
  $("#panel").stop();
});

jQuery方法链接

通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。”p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

1	$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery效果方法

方法	描述
animate()	对被选元素应用”自定义”的动画
clearQueue()	对被选元素移除所有排队函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	移除下一个排队函数，然后执行函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
fadeToggle	在 fadeIn() 和 fadeOut() 方法之间进行切换
finish()	对被选元素停止、移除并完成所有排队动画
hide()	隐藏被选元素
queue()	显示被选元素的排队函数
show()	显示被选元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	slideUp() 和 slideDown() 方法之间的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止被选元素上当前正在运行的动画
toggle()	hide() 和 show() 方法之间的切换