efeitos jQuery- Exemplos Hide e Show-editor online de exemplo(oldtoolbag.com)

<!DOCTYPE html>
<html>
<título>efeitos jQuery- Exemplos Hide e Show - tutorial básico(oldtoolbag.com)</título>
<head>
<style>
span {
  fundo: #7F00FF;
  cor
  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>propósito</span> <span>de</span>
  <span>jQuery</span> <span>é</span> <span>para</span>
  <span>facilitar</span> <span>façam</span> <span>mucho</span>
  <span>facilitar</span> <span>para</span> <span>usar</span>
  <span>JavaScript</span> <span>em</span> <span>seu</span>
  <span>website.</span>
</div>
<button id="hide-btn">Ocultar</button>
<button id="show-btn">Mostrar</button>
</body>
</html>