ドキュメント

Effects/slideToggle

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

slideToggle( speed, [callback] )

Toggle the visibility of 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 or shown 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 paragraphs to slide up or down, completing the animation within 600 milliseconds.

    $("button").click(function () {
      $("p").slideToggle("slow");
    });

<!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 () {
      $("p").slideToggle("slow");
    });

  });
  </script>
  <style>
  p { width:400px; }
  </style>
</head>
<body>
  <button>Toggle</button>
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
</body>
</html>

Animates divs between dividers with a toggle that makes some appear and some disappear.

    $("#aa").click(function () {
      $("div:not(.still)").slideToggle("slow", function () {
        var n = parseInt($("span").text(), 10);
        $("span").text(n + 1);
      });
    });

<!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(){
    
    $("#aa").click(function () {
      $("div:not(.still)").slideToggle("slow", function () {
        var n = parseInt($("span").text(), 10);
        $("span").text(n + 1);
      });
    });

  });
  </script>
  <style>
  div { background:#b977d1; margin:3px; width:60px; 
        height:60px; float:left; }
  div.still { background:#345; width:5px; }
  div.hider { display:none; }
  span { color:red; }
  </style>
</head>
<body>
  <button id =aa>Toggle</button> There have been <span>0</span> toggled divs.
  <div></div><div class="still"></div>
  <div style="display:none;"></div><div class="still"></div>
  <div></div><div class="still"></div>
  <div class="hider"></div><div class="still"></div>
  <div class="hider"></div><div class="still"></div>
  <div></div>
</body>
</html>

NameType