【jQuery UI 】-（1）-Effects

doctype html>
html lang="en">
head>
  meta charset="utf-8">
  title>hide demotitle>
  link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  style>
  div {
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
  }
  style>
  script src="//code.jquery.com/jquery-1.12.4.js">script>
  script src="//code.jquery.com/ui/1.12.1/jquery-ui.js">script>
head>
body>
 
button>hide the divbutton>
div>div>
 
script>
  $( "button" ).click(function() {
    $( "div" ).hide( "drop", { direction: "down" }, "slow" );
  });
script>
 
body>
html>

doctype html>
html lang="en">
head>
  meta charset="utf-8">
  title>show demotitle>
  link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  style>
  div {
    display: none;
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
  }
  style>
  script src="//code.jquery.com/jquery-1.12.4.js">script>
  script src="//code.jquery.com/ui/1.12.1/jquery-ui.js">script>
head>
body>
 
button>show the divbutton>
div>div>
 
script>
  $( "button" ).click(function() {
    $( "div" ).show( "fold", 1000 );
  });
script>
 
body>
html>

doctype html>
html lang="en">
head>
  meta charset="utf-8">
  title>toggle demotitle>
  link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  style>
    div {
      width: 100px;
      height: 100px;
      background: #ccc;
      border: 1px solid #000;
    }
  style>
  script src="//code.jquery.com/jquery-1.12.4.js">script>
  script src="//code.jquery.com/ui/1.12.1/jquery-ui.js">script>
head>
body>
 
button>toggle the divbutton>
div>div>
 
script>
    $( "button" ).click(function() {
      $( "div" ).toggle( "fold", 1000 );
    });
script>
 
body>
html>