Изучаем JQuery. Методы Hide и Show

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

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

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

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

На основе этих двух методов, можно построить простейшее выпадающее меню на JQuery. Итак, для начала нам понадобится вот такая html-разметка:

<div id="menu">
            <ul>
                <li>
                    <a href="#">первый пункт</a>
                    <ul>
                        <li><a href="#">пункт 1</a></li>
                        <li><a href="#">пункт 2</a></li>
                        <li><a href="#">пункт 3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">второй пункт</a>
                     <ul>
                        <li><a href="#">пункт 1</a></li>
                        <li><a href="#">пункт 2</a></li>
                        <li><a href="#">пункт 3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">третий пункт</a>
                     <ul>
                        <li><a href="#">пункт 1</a></li>
                        <li><a href="#">пункт 2</a></li>
                        <li><a href="#">пункт 3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">четвертый пункт</a>
                 	<ul>
                        <li><a href="#">пункт 1</a></li>
                        <li><a href="#">пункт 2</a></li>
                        <li><a href="#">пункт 3</a></li>
                    </ul>
                </li>
            </ul>
        </div>

Далее добавим немного CSS-стилей, чтобы наше меню выглядело как самое настоящее.

#menu {
    margin: 20px 0;
    clear: both;
    font-size: 12px;
}

ul {
    list-style: none;
	display: block;
}

ul li {
    list-style: none;
    float: left;
    display: block;
}

ul li a {
    text-decoration: none;
    color: #fff;
    background: #055788 url(menu.png) repeat-x;
    padding: 7px;
    border: 1px #2E5C09 solid;
}

ul li ul{
    display: none;
    float: none;
	margin: 5px 0 0 0;
	padding: 0;
}

ul li ul li{
	display: block;
	float: none;
}

ul li ul li a{
	background:  #000;
	display: block;
	padding: 7px;
	border: 1px #2E5C09 solid;		
}

ul li ul li a:hover{
	display: block;
	background: #63B024;
}

Все основные приготовления сделаны, теперь перейдем непосредственно к коду, в котором нет, ничего сложного:

 $(document).ready(function(){
            $("#menu ul li").hover(function(){
                $(this).find('ul').show();
            }, function(){
                $(this).find('ul').hide();
            })
        })

Как видно, из вышеприведенного примера, мы воспользовались событием .hover(), которое, как я уже писала ранее, включает в себя два обработчика событий: наведение мыши на элемент, и отведение мыши от элемента. Когда пользователь подводит мышь, отображается выпадающее меню, как только мышь перемещается в другое место, выпадающее меню снова исчезает.

Вот так просто, и без затей, мы создали простое выпадающее меню:

Как видите, использовать методы .hide() и .show() довольно быстро и удобно, но они кратковременные и не очень красивые. Для того чтобы добавить им изюминку, мы можем применить к ним скорость.

Эффекты и Скорость

Когда мы применяем скорость к методам .show() или .hide(), они становятся анимированными – в течении некоторого периода времени. Например, метод .hide(‘speed’), будет уменьшать высоту элемента, ширину и прозрачность, до тех пор, пока все три значения не станут равными 0, то есть пока не вступит в силу CSS-правило display: none. Метод .show(‘speed’), будет увеличивать высоту элемента, сверху вниз, ширину – слева направо, и прозрачность от 0 до 1, пока все содержимое элемента не станет полностью видимым.

Использование скорости

С любым эффектом JQuery, мы можем использовать одну из трех скоростей: slow, normal и fast. Использование .show(‘slow’) выполнит эффект появления в течение 0.6 секунд, .show(‘normal’) за 0.4 секунды, и show(‘fast’) за 0.2 секунды. Для еще большей точности, мы можем указать количество миллисекунд, например .show(850). В отличие от имен скоростей, числовые значения можно не заключать в кавычки. Давайте включим скорость в наш пример, и вы сразу увидите, насколько изящнее стало появляться выпадающее меню:

$(document).ready(function(){
            $("#menu ul li").hover(function(){
                $(this).find('ul').show('slow');
            }, function(){
                $(this).find('ul').hide();
            })
        })

Использование затухания

Если мы хотим, чтобы наше выпадающее меню появлялось только путем постепенного изменения прозрачности, мы можем использовать метод .fadeIn(‘slow’):

 $(document).ready(function(){
            $("#menu ul li").hover(function(){
	     $(this).find('ul').fadeIn('slow');
                $(this).find('ul').show();
            }, function(){
                $(this).find('ul').hide();
            })
        })

Теперь выпадающее меню будет появляться следующим образом:

Множественные эффекты

Из простых эффектов JQuery, только show() и hide() изменяют больше одного свойства за раз – высоту, ширину и прозрачность. Другие метод изменяют только одно свойство:

• fadeIn() и fadeout(): прозрачность
• fadeTo(): прозрачность
• slideDown() и slideUp(): высоту.

Тем не менее, JQuery также предоставляет мощный метод animate(), который позволяет нам создать собственную простую анимацию с множественными эффектами. Метод animate() принимает четыре аргумента:

1. map (карта) из CSS-свойств и их значений – такая же, как карта у метода .css(), о котором мы говорили в предыдущей статье.
2. Опционально speed (скорость), – которая может быть указана одним из ключевых слов, или числом миллисекунд.
3. Опционально easing type (тип появления) – расширенная опция, о которой будем говорить в будущих статьях
4. Опционально callback functions (вызываемая функция), которую мы обсудим далее.

Все вместе, три аргумента, будут выглядеть вот так:

.animate({param1: 'value1', param2: 'value2'}, speed, function() {
       alert('The animation is finished.');
});

Построение анимированного show()

Давайте еще раз взглянем на наш код для выпадающего меню:

 $(document).ready(function(){
            $("#menu ul li").hover(function(){
                $(this).find('ul').show();
            }, function(){
                $(this).find('ul').hide();
            })
        })

Помните что .show(‘slow’) одновременно изменяет ширину, высоту и прозрачность. Фактически этот метод всего лишь сокращенная запись метода .animate(), со специфическим набором встроенных CSS-свойств. Если мы хотим построить собственную анимацию с методом .animate, код должен выглядеть вот так:

 $(document).ready(function(){
            $("#menu ul li").hover(function(){
                $(this).find('ul').animate({height: 'show', width: 'show', opacity: 'show'}, 'slow');
            }, function(){
                $(this).find('ul').hide();
            })
        })

Как видите, .animate() имеет несколько собственных сокращений. Мы используем псевдоним show, для восстановления ширины и высоты к исходным значениям, до того, как они были спрятаны. Мы также можем использовать hide, toggle или любое соответствующее числовое значение.

Архив с примером.