На этом шаге мы рассмотрим использование методов .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() очень быстрые и удобные, но они не обладают особой эффектностью. Чтобы придать ее, мы можем определить для этих методов скорость выполнения.
На следующем шаге мы рассмотрим эффекты и скорость выполнения.