008_效果和动画的Callback函数

最新推荐文章于 2022-07-01 11:05:57 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-07-01 11:05:57 发布

阅读量149

点赞数

分类专栏： jQuery学习文章标签：动画 jquery javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109806461

版权

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

1. Callback函数在当前效果或动画100%完成之后执行。

2. jQuery动画的问题

2.1. 许多jQuery函数涉及动画。这些函数也许会将speed或duration作为可选参数。

2.2. speed或duration参数可以设置许多不同的值, 比如: "slow", "fast", "normal"或毫秒。

2.3. 由于JavaScript语句(指令)是按照次序逐一执行的, 动画之后的语句可能会产生错误或页面冲突, 因为动画还没有完成。

2.4. 为了避免这个情况, 您可以以参数的形式添加Callback函数。

3. jQuery Callback函数

3.1. 当动画100%完成后, 即调用Callback函数。

3.2. 典型的语法:

$(selector).hide(speed,callback)

3.3. callback参数是一个在hide操作完成后被执行的函数。

3.4. 错误(没有callback)

$("p").hide(1000);
alert("The paragraph is now hidden");

3.5. 正确(有callback)

$("p").hide(1000,function(){
	alert("The paragraph is now hidden");
});

3.6. 结论: 如果您希望在一个涉及动画的函数之后来执行语句, 请使用callback函数。

4. 例子

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery效果和动画的Callback函数</title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("div").hide('normal', function(){
						alert('隐藏效果执行完毕。')
					});
				});
				$('#btn2').click(function(){
					$("div").show('normal', function(){
						alert('显示效果执行完毕。')
					});
				});
				$('#btn3').click(function(){
					$("div").fadeOut('normal', function(){
						alert('淡出效果执行完毕。')
					});
				});
				$('#btn4').click(function(){
					$("div").fadeIn('normal', function(){
						alert('淡入效果执行完毕。')
					});
				});
				$('#btn5').click(function(){
					$("div").slideUp('normal', function(){
						alert('向上滑动效果执行完毕。')
					});
				});
				$('#btn6').click(function(){
					$("div").slideDown('normal', function(){
						alert('向下滑动效果执行完毕。')
					});
				});
				$('#btn7').click(function(){
					var div = $("div");
				  	div.animate({height:'+=100px', opacity: '0.5', fontSize: '2em'}, "slow");
				  	div.animate({width:'+=50px', opacity: '0.1', fontSize: '3em'}, "1000");
				  	div.animate({height:'+=100px', opacity: '0.5', fontSize: '2em'}, "2000");
				  	div.animate({width:'+=50px', opacity: '1', fontSize: '1em'}, "slow", function(){
						alert('动画序列执行完毕。')
					});
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">3s隐藏效果</button> <button id="btn2">3s显示效果</button>
		<button id="btn3">3s淡出效果</button> <button id="btn4">3s淡入效果</button>
		<button id="btn5">3s向上滑动效果</button> <button id="btn6">3s向下滑动效果</button>
		<button id="btn7">动画</button><br /><br />

		<div style="background-color: red; width:300px; height: 150px; position: relative;">
			jQuery效果和动画的Callback函数
		</div>
	</body>
</html>

4.2. 效果图