Разворачивание и сворачивание элементов

.slideDown()   .slideUp()

С помощью этих функций можно показывать и скрывать выбранные элементы на странице, за счет плавного разворачивания и сворачивания. Отметим, что после скрытия элемента, его css-свойство display становится равным none, а перед появлением, оно получает свое прежнее значение обратно. Методы имеют два варианта использования:

.slideDown([duration],[callback])  .slideUp([duration],[callback]):jQuery1.0

duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд). По умолчанию, анимация будет происходить за 400 миллисекунд.
callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия). Ей не передается никаких параметров, однако, внутри функции, переменная this будет содержать DOM-объект анимируемого элемента. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.

.slideDown([duration],[easing],[callback])  .slideUp([duration],[easing],[callback]):jQuery1.4.3

duration — см. выше.
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание)
callback — см. выше.

Примеры использования:

$("#leftFit").slideUp() свернет элемент с идентификатором leftFit за 400 мс.
$("#leftFit").slideDown() развернет элемент с идентификатором leftFit за 400 мс.
$("#leftFit").slideUp(300) в течении 1/3 секунды свернет элемент с идентификатором leftFit.
$("#leftFit").slideDown("slow") в течении 600 мс развернет элемент с идентификатором leftFit.

Можно скрывать и показывать элементы с помощью изменения размеров и прозрачности, с помощью функций Show(), Hide().

В действии

При нажатии на текст свернем картинку, а после завершения этой анимации выведем текст:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    #clickme{width:180px; border:1px solid gray; padding:3px; cursor:pointer}
    body{background-color:#eee}
  ~lt~/style~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="clickme"~gt~
  Утилизировать Бендера
~lt~/div~gt~
~lt~img id="robot" src="/tags/images/bender.jpg" style="width:147px" alt=""/~gt~
~lt~div id="result"~gt~~lt~/div~gt~

~lt~script~gt~
$('#clickme').click(function(){
  $('#robot').slideUp('slow', function() {
    $('#result')("кто же теперь убьет всех человеков...");
  });
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • разворачивание элементов
  • развернуть элемент
  • .slideDown()
  • slideDown()

Поисковые ключи:
  • сворачивание элементов
  • свернуть элемент
  • .slideUp()
  • slideUp()