Появление и иcчезновение элементов

.show()  .hide()

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

.show()  .hide():jQuery1.0

Мгновенно показывает/скрывает выбранные элементы, установив их css-свойство display в none, не изменяя при этом их прозрачность и размеры.

.show(duration,[callback])  .hide(duration,[callback]):jQuery1.0

duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд). Если этот параметр не задан, анимация будет происходить мгновенно, элемент просто появится/исчезнет

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

.show([duration],[easing],[callback])  .hide([duration],[easing],[callback]):jQuery1.4.3

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

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

$("#leftFit").hide() мгновенно скроет элемент с идентификатором leftFit.
$("#leftFit").show() мгновенно покажет элемент с идентификатором leftFit.
$("#leftFit").hide(300) в течении 1/3 секунды скроет элемент с идентификатором leftFit.
$("#leftFit").show("slow") в течении 600 миллисекунд вернет видимость элементу с идентификатором leftFit.

Можно скрывать и показывать элементы с помощью сворачивания/разворачивания (за счет изменения высоты). Это делают функции slideUp(), slideDown().

В действии

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

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    #clickme{width:300px; border:1px solid gray; padding:3px; cursor:pointer}
  ~lt~/style~gt~
  ~lt~script src="//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="/content/manual/jquery/robot.jpg" alt=""/~gt~
~lt~div id="result"~gt~~lt~/div~gt~

~lt~script~gt~
$('#clickme').click(function(){
  $('#robot').hide('slow', function() {
    $('#result').html("...но твоя мечта не осуществится.~lt~br~gt~"+
     "Нажал на надпись, но не особо рад —~lt~br~gt~"+
     "с сайтом предстоит всю ночь возиться :-(");
  });
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • появление элемента
  • показать элемент
  • .show()
  • show()
Поисковые ключи:
  • убрать видимость элемента
  • исчезновение элемента
  • скрытие элемента
  • скрыть элемент
  • спрятать элемент
  • .hide()
  • hide()