ドキュメント

Effects/slideUp

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

slideUp( speed, [callback] )

Hide all matched elements by adjusting their height and firing an optional callback after completion.
Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner. As of jQuery 1.3 the vertical padding and vertical margin are also animated, creating a smoother effect.
Arguments:
speedString, Number
A string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback (Optional)Function
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
  this; // dom element
}
Examples:

Animates all divs to slide up, completing the animation within 400 milliseconds.

    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").show("slow");
      } else {
        $("div").slideUp();
      }
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").show("slow");
      } else {
        $("div").slideUp();
      }
    });

  });
  </script>
  <style>
  div { background:#3d9a44; margin:3px; width:80px; 
        height:40px; float:left; }
  </style>
</head>
<body>
  Click me!
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Animates all paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.

    $("button").click(function () {
      $(this).parent().slideUp("slow", function () {
        $("#msg").text($("button", this).text() + " has completed.");
      });
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("button").click(function () {
      $(this).parent().slideUp("slow", function () {
        $("#msg").text($("button", this).text() + " has completed.");
      });
    });

  });
  </script>
  <style>
  div { margin:2px; }
  </style>
</head>
<body>
  <div>
    <button>Hide One</button>
    <input type="text" value="One" />
  </div>
  <div>
    <button>Hide Two</button>
    <input type="text" value="Two" />
  </div>
  <div>
    <button>Hide Three</button>
    <input type="text" value="Three" />
  </div>
  <div id="msg"></div>
</body>
</html>

NameType