Шаг 52.
Библиотека jQuery.
Эффекты. Простые эффекты скрытия и отображения

    На этом шаге мы рассмотрим использование методов .hide() и .show().

    Простые методы .hide() и .show() при вызове без параметров могут использоваться как интеллектуальные сокращенные версии метода .css('display','string'), где 'string' - это значение свойства display. В результате, как и следует ожидать, соответствующий набор элементов будет немедленно скрыт или отображен без применения каких-либо анимационных эффектов.

    Метод .hide() устанавливает встроенный атрибут style в значение display: none. Интеллектуальность заключается в том, что этот метод запоминает значение свойства display, обычно block или inline, прежде чем оно будет замещено значением none. В свою очередь, метод .show() восстанавливает значение свойства display соответствующего набора элементов, имевшееся до того, как было установлено значение display: none.


   Примечание. Дополнительную информацию о свойстве display и о том, как его значения влияют на визуальное представление элементов веб-страницы, можно найти на сайте Mozilla Developer Center по адресу: https://developer.mozilla.org/en/CSS/display/, а примеры - по адресу: https://developer.mozilla.org/samples/cssref/display.html.

    Эту особенность методов .show() и .hide() весьма удобно использовать для сокрытия элементов, для которых значение по умолчанию свойства display переопределяется в таблицах стилей. Допустим, по умолчанию элемент <li> имеет значение свойства display:block, но в случае оформления горизонтального меню мы можем изменить его на display:inline. К счастью, применение метода .show() к скрытым элементам, например к одному из таких тегов <li>, не просто сбрасывает свойство в значение по умолчанию display:block, что могло бы привести к размещению каждого элемента <li> в отдельной строке, а восстанавливает предыдущее значение display:inline, сохраняя тем самым горизонтальное расположение пунктов меню.

    Использование этих двух методов можно коротко продемонстрировать на примере присоединения второго параграфа и ссылки "Далееe" после первого параграфа в следующем примере разметки HTML:

<div id="switcher">
  <div class="label">Стиль текста</div>
  <button id="switcher-default">Обычный</button>
  <button id="switcher-large">Увеличить</button>
  <button id="switcher-small">Уменьшить</button>
</div>
<div class="speech">
        <p>Несколько  лет  тому  назад  в  одном  из своих  поместий жил старинный
русской барин, Кирила Петрович Троекуров. Его богатство, знатный род и связи
давали ему большой вес в губерниях, где  находилось его имение.  Соседи рады
были угождать малейшим его прихотям; губернские чиновники трепетали  при его
имени;  Кирила  Петрович принимал знаки  подобострастия как надлежащую дань;
дом его  всегда был полон  гостями, готовыми тешить  его барскую праздность,
разделяя  шумные,  а  иногда  и  буйные  его  увеселения.  Никто  не  дерзал
отказываться от его приглашения, или в известные  дни не являться  с должным
почтением в село  Покровское. В домашнем  быту Кирила Петрович выказывал все
пороки человека необразованного. Избалованный всем, что только окружало его,
он привык давать полную волю всем порывам пылкого своего нрава и всем затеям
довольно ограниченного  ума.  Не смотря на  необыкновенную  силу  физических
способностей, он раза два в неделю страдал от обжорства и каждый вечер бывал
навеселе.  В  одном  из флигелей  его  дома  жили  16  горничных,  занимаясь
рукоделиями,  свойственными  их   полу.  Окны  во  флигеле  были  загорожены
деревянною решеткою;  двери  запирались замками, от  коих  ключи хранились у
Кирила  Петровича.  Молодые затворницы,  в положеные часы,  сходили в  сад и
прогуливались  под  надзором двух  старух.  От  времени  до  времени  Кирила
Петрович выдавал некоторых из них за  муж и новые поступали  на  их место. С
крестьянами и дворовыми обходился он строго и  своенравно; не  смотря на то,
они были ему преданы: они тщеславились богатством  и славою своего господина
и в свою очередь позволяли себе многое в отношении к их соседам,  надеясь на
его сильное покровительство.</p>
     <p>Всегдашние занятия Троекурова состояли  в разъездах  около  пространных
его  владений,  в продолжительных  пирах, и  в проказах,  ежедневно при  том
изобретаемых и  жертвою  коих бывал обыкновенно какой-нибудь новый знакомец;
хотя и старинные приятели не всегда их избегали за исключением одного Андрея
Гавриловича Дубровского. Сей Дубровский, отставной поручик  гвардии, был ему
ближайшим  соседом  и  владел семидесятью  душами.  Троекуров,  надменный  в
сношениях с  людьми самого высшего  звания, уважал Дубровского, не смотря на
его смиренное  состояние. Некогда были они товарищами  по службе и Троекуров
знал по опыту нетерпеливость  и решительность его характера.  Обстоятельства
разлучил  и их надолго. Дубровский  с расстроенным  состоянием принужден был
выдти  в отставку  и поселиться в остальной своей деревне.  Кирила Петрович,
узнав о том, предлагал  ему свое  покровительство, но Дубровский  благодарил
его и остался беден и независим. Спустя  несколько  лет Троекуров, отставной
генерал-аншеф,  приехал в свое поместие,  они свидились  и обрадовались друг
другу. С тех пор они каждый день бывали вместе, и Кирила Петрович, отроду не
удостоивавший никого  своим посещением, заезжал  запросто в  домишка  своего
старого   товарища.   Будучи  ровесниками,  рожденные  в   одном   сословии,
воспитанные  одинаково,  они  сходствовали  отчасти   и  в  характерах  и  в
наклонностях.  В  некоторых  отношениях  и судьба  их  была  одинакова:  оба
женились по любви, оба скоро овдовели, у обоих оставалось по ребенку.  - Сын
Дубровского  воспитывался в Петербурге, дочь Кирила Петровича росла в глазах
родителя, и  Троекуров часто говаривал  Дубровскому: "Слушай,  брат,  Андрей
Гаврилович: коли в твоем Володьке будет путь,  так отдам за него Машу; даром
что  он  гол  как  сокол".  Андрей  Гаврилович  качал   головой   и  отвечал
обыкновенно:  "Нет, Кирила Петрович: мой  Володька не жених Марии Кириловне.
Бедному дворянину, каков он,  лучше жениться на бедной  дворяночке,  да быть
главою в доме, чем сделаться приказчиком избалованной бабенки".</p>
  <a href="#" class="more">Далеe</a>
</div>

    Когда дерево DOM готово к работе, второй параграф скрывается:

$(document).ready(function() {
  $('p:eq(1)').hide();
});

    А текст выглядит так, как показано на рисунке 1.

Рис.1. Вид страницы сразу после загрузки

Полный текст этого примера можно взять здесь.

    Затем, когда пользователь щелкает на ссылке Далее, находящейся в конце первого параграфа, она скрывается, и отображается второй параграф:

$(document).ready(function() {
  $('p:eq(1)').hide(); 
  $('a.more').click(function() {
    $('p:eq(1)').show();
    $(this).hide();
    return false;
  });
});

    Обратите внимание, как с помощью инструкции return false предотвращается выполнение действия по умолчанию для ссылки.

    Методы .hide() и .show() очень быстрые и удобные, но они не обладают особой эффектностью. Чтобы придать ее, мы можем определить для этих методов скорость выполнения.

    На следующем шаге мы рассмотрим эффекты и скорость выполнения.




Предыдущий шаг Содержание Следующий шаг