slideDown()

Была ли эта информация полезной?

Да Нет

slideDown( speed, [callback] )

Раскрывает все элементы набора, используя эффект изменения высоты элементов. Также, по завершению операции возможен запуск функции, переданной в аргумент «вызов».

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

Аргументы

speed

Строка, Число

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

callback (Optional)

Функция

Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента.

function callback() {
  this; // dom element
}

Примеры

Пример 1

Раскрывает все элементы 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 type="text/javascript" language="javascript">

  $(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>

Попробуй сам

Пример 2

Раскрывает все элементы 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 type="text/javascript" language="javascript">

  $(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>

Попробуй сам

slideDown()

slideDown( speed, [callback] )

Аргументы

Примеры

Пример 1

Пример 2

Комментарии