slideUp

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

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

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

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

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

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

Скрывает все элементы div используя эффект “скольжения” вверх, длительность анимационных эффектов — 400 миллисекунд.
    $(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>
Скрывает все элементы input, используя данный эффект “скольжения” вверх. Время анимации составляет 200 мс. Когда анимация выполнена, отображается соответствующее сообщение.

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