slideDown

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

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

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

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

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

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

Раскрывает все элементы div используя эффект «скольжения» вниз, длительность анимационных эффектов — 600 миллисекунд.
    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").slideDown("slow");
      } else {
        $("div").hide();
      }
    });
<!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").slideDown("slow");
      } else {
        $("div").hide();
      }
    });

  });
  </script>

  <style>
  div { background:#de9a44; margin:3px; width:80px;
        height:40px; display:none; float:left; }
  </style>
</head>
<body>
  Click me!
  <div></div>
  <div></div>

  <div></div>
</body>
</html>
Раскрывает все элементы input используя данный эффект «скольжения» вниз. Время анимации составляет 1000 мс. Когда анимация выполнена, вызывается функция, которая изменяет внешний вид элементов input, особенно среднего элемента, которому передается фокус.
    $("div").click(function () {
      $(this).css({ borderStyle:"inset", cursor:"wait" });
      $("input").slideDown(1000,function(){
        $(this).css("border", "2px red inset")
               .filter(".middle")
                 .css("background", "yellow")
                 .focus();
        $("div").css("visibility", "hidden");
      });
    });
<!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(){

    $("div").click(function () {
      $(this).css({ borderStyle:"inset", cursor:"wait" });
      $("input").slideDown(1000,function(){
        $(this).css("border", "2px red inset")
               .filter(".middle")
                 .css("background", "yellow")
                 .focus();
        $("div").css("visibility", "hidden");
      });
    });

  });
  </script>

  <style>
  div { background:#cfd; margin:3px; width:50px;
        text-align:center; float:left; cursor:pointer;
        border:2px outset black; font-weight:bolder; }
  input { display:none; width:120px; float:left;
          margin:10px; }
  </style>
</head>
<body>
  <div>Push!</div>
  <input type="text" />

  <input type="text" class="middle" />
  <input type="text" />
</body>

</html>
Name Type