JQuery学习笔记之JQuery效果hide、show以及toggle方法的callback参数

本文链接：https://blog.youkuaiyun.com/manmanwei/article/details/73912631

本文详细介绍了jQuery中的hide()、show()和toggle()方法，并重点讲解了它们的callback参数，包括速度选项、执行时机以及如何使用匿名和命名函数。通过示例代码展示了callback函数在处理多个元素时的执行次数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、jQuery hide() 和 show()

语法:

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

二、jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

语法:

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

三、对于callback参数的说明

1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；

3.callback参数可以是函数名，也可以是匿名函数；

示例代码1：因为有三个<P>元素，所以demo函数会被执行3次。

<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000,demo);
  });
	function demo(){
		alert("great!");
	}
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
<p>这是另外2个小段落</p>
</body>
</html>

示例代码2：callback函数的函数名加了圆括号，所以会立即执行demo()函数的代码，而不是等到隐藏完成之后才执行

<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000,demo());
  });
	function demo(){
		alert("great!");
	}
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
<p>这是另外2个小段落</p>
</body>
</html>

示例代码3：callback参数是匿名函数，隐藏完成调用函数，同样会调用3次；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000,function(){
		alert("great!");
	});
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
<p>这是另外2个小段落</p>
</body>
</html>