jQuery 效果- Hide 和Show-在线运行代码案例-大卫编程网

<!DOCTYPE html>
<html>
<title>jQuery 效果- Hide 和Show示例 - 基础教程(div.cn)</title>

<head>
<style>
span {
  background: #7F00FF;
  color: white;
  float: left;
  padding: 10px 5px;
}
div {
  margin-bottom: 15px;
}
.clearfix::after {
  content: '';
  clear: both;
  display: table;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide-btn").click(function(){
    $("span:last-child").hide("fast", function(){
      $(this).prev().hide("fast", arguments.callee);
    });
  });

$("#show-btn").click(function(){
    $("span:first-child").show("fast", function(){
      $(this).next().show("fast", arguments.callee);
    });
  });
});
</script>
</head>
<body>

<div class="clearfix">
  <span>The</span> <span>purpose</span> <span>of</span>
  <span>jQuery</span> <span>is</span> <span>to</span>
  <span>make</span> <span>it</span> <span>much</span>
  <span>easier</span> <span>to</span> <span>use</span>
  <span>JavaScript</span> <span>on</span> <span>your</span>
  <span>website.</span>
</div>

</body>
</html>