show

« Обратно к странице эффектов

[редактировать]

show( )

Отображает каждый из совпавших элементов набора, если они были скрыты (не имеет значения как: либо через  функцию hide(), либо посредством display:none в таблице стилей). Если все элементы видимы, то ничего не происходит.
То же самое, что и show( скорость, [вызов] ), только  без анимации.
Примеры:

Отображает все параграфы.

$("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>
Name Type

[редактировать]

show( скорость, [вызов] )

Отображает все совпавшие элементы набора с использованием анимационных эффектов, после чего опционально запускает указанную в аргументе вызов функцию.
Высота, ширина и прозрачность каждого элемента меняются динамически в соответствии с указанной скоростью. Начиная с jQuery версии 1.3 атрибуты padding и margin также анимируются, создавая при этом более плавный эффект.
Аргументы:

скорость Строка, Число
Строка представляет собой один из трех предустановленных режимов скорости (»slow», «normal», или «fast»). В качестве числа указывается значение в миллисекундах (например, 1000).
вызов (необязательно) Функция
Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента.

function callback() {
  this; // dom element
}
Примеры:

Медленно отображает все скрытые параграфы, длительность анимационных эффектов — 600 миллисекунд.
    $("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>
Отображает все скрытые элементы div по порядку, используя режим скорости fast. Каждая анимация занимает 200 миллисекунд. По завершению очередной анимации начинается следующая.
    $("#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>
Отображает все скрытые элементы span и input по порядку, используя режим скорости normal. По завершению анимации меняет текст параграфа.
    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" />
    </form>
  </div>

  <p style="display:none;">I'm hidden...</p>
</body>
</html>
Name Type