На этом шаге мы рассмотрим использование методов .hide() и .show().
Простые методы .hide() и .show() при вызове без параметров могут использоваться как интеллектуальные сокращенные версии метода .css('display','string'), где 'string' - это значение свойства display. В результате, как и следует ожидать, соответствующий набор элементов будет немедленно скрыт или отображен без применения каких-либо анимационных эффектов.
Метод .hide() устанавливает встроенный атрибут style в значение display: none. Интеллектуальность заключается в том, что этот метод запоминает значение свойства display, обычно block или inline, прежде чем оно будет замещено значением none. В свою очередь, метод .show() восстанавливает значение свойства display соответствующего набора элементов, имевшееся до того, как было установлено значение display: none.
Эту особенность методов .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() очень быстрые и удобные, но они не обладают особой эффектностью. Чтобы придать ее, мы можем определить для этих методов скорость выполнения.
На следующем шаге мы рассмотрим эффекты и скорость выполнения.