天天看点

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

一、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>
           

继续阅读