ドキュメント

Effects/show

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

show( )

Displays each of the set of matched elements if they are hidden.
Same as show( speed, [callback] ) without animations. Doesn't change anything if the selected elements are all visible. It doesn't matter if the element is hidden via a hide() call, or via a display:none in a stylesheet.
Examples:

Shows all paragraphs.

$("p").show()

<!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(){
    $("p").show()
  });
  </script>
  
</head>
<body>
  <p style="display:none">Hello 1</p>
</body>
</html>

NameType

show( speed, [callback] )

Show all matched elements using a graceful animation and firing an optional callback after completion.

The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed. As of jQuery 1.3 the padding and 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 hidden paragraphs to show slowly, completing the animation within 600 milliseconds.

    $("button").click(function () {
      $("p").show("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").show("slow");
    });

  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <button>Show it</button>
  <p style="display: none">Hello  2</p>
</body>
</html>

Animates all hidden divs to show fastly in order, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.

    $("#showr").click(function () {
      $("div:eq(0)").show("fast", function () {
        // use callee so don't have to name the function
        $(this).next().show("fast", arguments.callee); 
      });
    });
    $("#hidr").click(function () {
      $("div").hide(2000);
    });

<!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(){
    
    $("#showr").click(function () {
      $("div:eq(0)").show("fast", function () {
        // use callee so don't have to name the function
        $(this).next().show("fast", arguments.callee); 
      });
    });
    $("#hidr").click(function () {
      $("div").hide(2000);
    });

  });
  </script>
  <style>
  div { background:#def3ca; margin:3px; width:80px; 
        display:none; float:left; text-align:center; }
  </style>
</head>
<body>
  <button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>Hello 3,</div>
  <div>how</div>
  <div>are</div>
  <div>you?</div>
</body>
</html>

Animates all span and input elements to show normally. Once the animation is done, it changes the text.

    function doIt() {
      $("span,div").show("normal");
    }
    $("button").click(doIt); // can pass in function name
    $("form").submit(function () {
      if ($("input").val() == "yes") {
        $("p").show(4000, function () {
          $(this).text("Ok, DONE! (now showing)");
        });
      }
      $("span,div").hide("normal");
      return false; // to stop the submit
    });

<!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(){
    
    function doIt() {
      $("span,div").show("normal");
    }
    $("button").click(doIt); // can pass in function name
    $("form").submit(function () {
      if ($("input").val() == "yes") {
        $("p").show(4000, function () {
          $(this).text("Ok, DONE! (now showing)");
        });
      }
      $("span,div").hide("normal");
      return false; // to stop the submit
    });

  });
  </script>
  <style>
  span { display:none; }
  div { display:none; }
  p { font-weight:bold; background-color:#fcd; }
  </style>
</head>
<body>
  <button>Do it!</button>
  <span>Are you sure? (type 'yes' if you are) </span>
  <div>
    <form>
      <input type="text"  value="as;ldkfjalsdf"/>
    </form>
  </div>
  <p style="display:none;">I'm hidden...</p>
</body>
</html>

NameType