<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>15.2jQuery效果-逐个显示与隐藏</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//实现隐藏
$('#btn1').click(function(){
/*$('span').eq(3).hide(1000,function h(){$('span').eq(2).hide(1000,function h(){$('span').eq(1).hide(1000,function h(){$('span').eq(0).hide(1000,function h(){})})});}); */
$('span').last().hide(500,function h(){
$(this).prev('span').hide(500,h);
});
});
//实现显示(改进上述方法)
$('#btn2').click(function(){
$('span').first().show(500,function s(){
$(this).next().show(500,s);
});
});
});
</script>
</head>
<body>
<!--实现逐个隐藏和显示"欢迎光临"四个字-->
<input type="button" id="btn1" value="隐藏"><br>
<input type="button" id="btn2" value="显示"><br>
<span>欢</span>
<span>迎</span>
<span>光</span>
<span>临</span>
</body>
</html>
默认效果
