Mr.J-- jQuery学习笔记(十四)--动画显示隐藏

本文链接：https://blog.csdn.net/Ms_yjk/article/details/92624200

这篇博客介绍了jQuery中的eq()、show()、hide()和toggle()函数，详细阐述了它们的定义、用法及注意事项。eq()函数用于选择具有指定索引值的元素，show()和hide()分别用于动画显示和隐藏元素，toggle()则能实现元素显示和隐藏的切换。文中还包含了实际的页面渲染示例，展示了这些动画效果如何在实际操作中应用。

摘要由CSDN通过智能技术生成

eq()函数

定义和用法

:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。

经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素（如上面的例子）。

语法

$(":eq(index)")

参数	描述
index	必需。规定元素的 index 值。

show()函数

定义和用法

如果被选元素已被隐藏，则显示这些元素：

语法

$(selector).show(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到完全可见的速度。默认为 "0"。可能的值：毫秒（比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback	可选。show 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。除非设置了 speed 参数，否则不能设置该参数。

参数

描述

speed

可选。规定元素从隐藏到完全可见的速度。默认为 "0"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

callback

可选。show 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

hide()函数

定义和用法

如果被选的元素已被显示，则隐藏该元素。

语法

$(selector).hide(speed,callback)

参数	描述
speed	可选。规定元素从可见到隐藏的速度。默认为 "0"。可能的值：毫秒（比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback	可选。hide 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。除非设置了 speed 参数，否则不能设置该参数。

参数

描述

speed

可选。规定元素从可见到隐藏的速度。默认为 "0"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

callback

可选。hide 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

toggle()函数

定义和用法

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

语法

$(selector).toggle(speed,callback,switch)

参数	描述
speed	可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。可能的值：毫秒（比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。如果设置此参数，则无法使用 switch 参数。
callback	可选。toggle 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。除非设置了 speed 参数，否则不能设置该参数。
switch	可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。 True - 显示所有元素 False - 隐藏所有元素如果设置此参数，则无法使用 speed 和 callback 参数。

参数

描述

speed

可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数，则无法使用 switch 参数。

callback

可选。toggle 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

switch

可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

True - 显示所有元素
False - 隐藏所有元素

如果设置此参数，则无法使用 speed 和 callback 参数。

提示和注释

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

资料来源：http://www.w3school.com.cn/jquery/index.asp

页面渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }
    </style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>

动画的显示

$("button").eq(0).click(function () {
	// $("div").css("display", "block");
	// 注意: 这里的时间是毫秒
	$("div").show(1000, function () {
		// 作用: 动画执行完毕之后调用
		alert("显示动画执行完毕");
	});
});

点击显示按钮，动画进行动态显示：

动画的隐藏

$("button").eq(1).click(function () {
	// $("div").css("display", "none");
	$("div").hide(1000, function () {
		alert("隐藏动画执行完毕");
	});
});

点击隐藏：

动画切换

$("button").eq(2).click(function () {
	$("div").toggle(1000, function () {
		alert("切换动画执行完毕");
	});
});

切换两种状态：