Управляем видимостью объекта с помощью jQuery


Сегодня мне хотелось бы подробнее остановится на возможностях, которые предоставляет для управления видимостью объектов jQuery.
Вообще говоря, можно управлять видимостью любых объектов, которым присвоен идентификатор или класс, с помощью которых можно отобрать объект и указать jQuery какие действия необходимо с ним совершить.

В некоторых уроках я уже использовал возможности jQuery для управления видимостью объектов на веб-странице. Так, например, в уроке "Создание шаблона сайта с помощью блоков", с помощью jQuery я скрывал и показывал по клику мышки листинг кода.

Для демонстрации я выбрал рисунок забавного человечка с ключом, который красуется на главной странице и в качестве favicon-а (маленькой картинки в адресной строке браузера) моего сайта. Подробнее узнать как установить favicon себе на сайт вы можете в уроке "Как установить favicon на сайт".

А начать я хочу с методов управления видимостью - hide(), show() и toggle().
Эти методы отвечают за видимость элементов, и работают по следующему принципу:

  • - hide() - скрыть,
  • - show() - показать,
  • - toggle() - показать, если скрыты и скрыть, если видимы.

Попробуйте понажимать на кнопки под рисунком:

Хочу веб-сайт


В этом примере я присваиваю идентификаторы как кнопкам, с помощью которых буду скрывать или показывать рисунок, так и самому рисунку.

HTML код:
<html> <head> <title>Управляем видимостью объекта с помощью jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/myscripts.js"></script> </head> <body> <div style="text-align:center;"> Попробуйте понажимать на кнопки под рисунком: <img id="hideImg" src="/img/logo.png" alt="Хочу веб-сайт" width="300" height="283" /> <input id="hideImg1" type="button" value="Скрыть" /> <input id="showImg1" type="button" value="Показать" /> </div> </body> </html>

В коде jQuery на странице myscripts.js я просто отслеживаю событие клика по кнопкам, и в зависимости от того по какой кнопке произведен клик, скрываю hide() или показываю show() отобранный по идентификатору $('#hideImg') объект - мой рисунок.

Код jQuery:
$('#hideImg1').click(function(){ $('#hideImg').hide(); }); $('#showImg1').click(function(){ $('#hideImg').show(); });

На самом деле скрыть элемент можно не только методом hide(), но и при помощи таблицы стилей CSS. Так, если бы мы хотели, чтобы при загрузке страницы наш рисунок был скрыт, то добиться этого можно следующими способами:

  • - использовать метод hide();
  • - использовать свойство display CSS.

Полученный результат был бы одинаков.

Кстати, jQuery предоставляет пользователям широкий набор возможностей для управления стилями CSS, но это тема для отдельного урока: "Управляем стилями CSS с помощью jQuery".

jQuery позволяет использовать эти же методы, что гораздо нагляднее, с анимацией:

  • - hide(speed, callback) - скрыть,
  • - show(speed, callback) - показать,
  • - toggle(speed, callback) - переключить (показать, если скрыты и наоборот).

Где speed - скорость изменения высоты, ширины или свойства opacity (прозрачность) элемента. Скорость может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах. Сallback - функция, которая будет выполняться после завершения анимации. Ее присутствие вовсе необязательно.

Посмотрите пример с тем же рисунком, только скрывать и отображать рисунок я буду с помощью метода toggle().

Нажмите на кнопку под рисунком:

Хочу веб-сайт


HTML код:
<html> <head> <title>Управляем видимостью объекта с помощью jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/myscripts.js"></script> </head> <body> <div style="text-align:center;"> Попробуйте понажимать на кнопку под рисунком: <img id="toggleImg" src="/img/logo.png" alt="Хочу веб-сайт" width="300" height="283" /> <input id="toggleImg1" type="button" value="Скрыть/Показать" /> </div> </body> </html>

Метод toggle, как вы наверное заметили, работает как обычный переключатель, выполняя поочередно заданную последовательность действий. В этом примере при первом клике по кнопке скрывает, а при втором отображает рисунок. Пояснения в коде jQuery не должны вызвать у вас особых вопросов.

Код jQuery:
// Событие перключатель toggle $('#toggleImg1').toggle(function(){// первое действие - скрываем рисунок // Отбираем элемент с идентификатором $('#toggleImg').hide('slow'); // Исчезает slow (медленно) }, function(){ // Второе действие - показываем $('#toggleImg').show(2000); // рисунок за 2 секунды });

Одной из разновидностью управления видимостью объектов в jQuery являются методы свертывания - slideDown(), slideUp() и slideToggle() Эти методы тоже отвечают за видимость объектов , но работают по принципу свернуть элемент снизу-вверх , развернуть элемент сверху-вниз:

  • - slideUp() - свернуть,
  • - slideDown() - развернуть,
  • - toggle() - развернуть, если скрыт и свернуть, если видим.

А покажет нам это пингвиненок Tux – символ свободно распостраняемого программного обеспечения.

Попробуйте понажимать на кнопки под рисунком:

пингвиненок Tux


HTML код:
<html> <head> <title>Управляем видимостью объекта с помощью jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/myscripts.js"></script> </head> <body> <div style="text-align:center;"> Попробуйте понажимать на кнопки под рисунком: <img id="slideImg" src="/img/tux.png" alt="пингвиненок Tux" width="300" height="351" /> <input id="slideImgUp" type="button" value="Скрыть" /> <input id="slideImgDown" type="button" value="Показать" /> </div> </body> </html>

Код jQuery:
$('#slideImgUp').click(function(){ $('#slideImg').slideUp(); }); $('#slideImgDown').click(function(){ $('#slideImg').slideDown(); });

Эти методы также как и методы hide() и show() можно использовать с анимацией:

  • - slideUp(speed, callback) - свернуть,
  • - slideDown(speed, callback) - развернуть,
  • - slideToggle(speed, callback) - переключить (развернуть, если скрыты и наоборот).

Где speed - скорость изменения высоты элемента. Скорость может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах. Сallback - функция, которая будет выполняться после завершения анимации. Ее присутствие вовсе необязательно.

Вот тот же пример, только скрывать и показывать рисунок я буду за 3 секунды с помощью метода toggle().

Нажмите на кнопку под рисунком:

пингвиненок Tux


Код jQuery:
$('#slideToggleImg1').click(function(){ $('#slideToggleImg').slideToggle(3000); });

Еще одна разновидность управления видимостью объекта в jQuery, это методы исчезновения - fadeTo(), fadeOut() и fadeIn()

  • - fadeTo(speed, opacity, callback) - уменьшает свойство opacity (прозрачность) к заданному значению,
  • - fadeOut(speed, callback) - уменьшает свойство opacity (прозрачность),
  • - fadeIn(speed, callback) - увеличивает свойство opacity (прозрачность).

Где speed - изменения прозрачности элемента. Скорость может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах. Opacity - значение прозрачности, до которого оно будет уменьшено (число от 0 до 1). Сallback - функция, которая будет выполняться после завершения анимации. Ее присутствие вовсе необязательно.

Методы fadeOut(), fadeIn() и fadeTo():

google



google


HTML код:
<html> <head> <title>Управляем видимостью объекта с помощью jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/myscripts.js"></script> </head> <body> <div style="text-align:center;"> Методы fadeOut(), fadeIn() и fadeTo():<br /><br /> <img id="fadeImg" src="/img/logo_google.png" alt="google" width="300" height="123" /> <input id="fadeImgOut" type="button" value="Скрыть" /> <input id="fadeImgIn" type="button" value="Показать" /> <img id="fadeImg1" src="/img/logo_google.png" alt="google" width="300" height="123" /> <input id="fadeImgTo" type="button" value="fadeTo" /> </div> </body> </html>

Код jQuery:
$('#fadeImgOut').click(function(){ $('#fadeImg').fadeOut(1000); }); $('#fadeImgIn').click(function(){ $('#fadeImg').fadeIn(2000); }); $('#fadeImgTo').click(function(){ $('#fadeImg1').fadeTo(3000, 0.5); });

Ну и напоследок хочу вам показать методы управления видимостью объекта в jQuery с помощью анимации - animate() и stop(). А помогут мне в этом цветные квадраты, с помощью которых я демонстрировал свойства z-inex в уроке "Исследуем свойство z-index с помощью jQuery" и "Управляем положением слоя с помощью z-index".

Метод:
- animate(params, options) - анимирует стилевые свойства.
Где params - атрибуты css, которые хотим анимировать ("width", "top", "border"...).
Options - свойства анимации (в том числе скорость).

Метод:
- stop() - останавливает анимацию.

Red
Green
Blue


HTML код:
<div id="div_rel"> <div id="red_abs">Red</div> <div id="green_abs">Green</div> <div id="blue_abs">Blue</div> </div><br /> <div style="text-align:center;"> <input id="startAnimate" type="button" value="Запустить" /> <input id="stopAnimate" type="button" value="Остановить" /> <input id="returnAnimate" type="button" value="Вернуть" /><br /><br /> </div>

Стили CSS:
#div_rel { position:relative; width:300px; height:250px; border:dotted 1; background-color:white; } #red_abs {position:absolute; width:100px; height:100px; left:200px; top:0px; background-color:red; border:solid 1px white; color:white; text-align:right; z-index:1; } #green_abs {position:absolute; width:100px; height:100px; left:250px; top:25px; background-color:green; border:solid 1px white; color:white; text-align:right; z-index:2; } #blue_abs {position:absolute; width:100px; height:100px; left:300px; top:50px; background-color:blue; border:solid 1px white; color:white; text-align:right; z-index:3; }

Код jQuery:
$('#startAnimate').click(function(){ $('#red_abs').animate({ width:"200px", height:"200px" }, 3000 ); $('#green_abs').animate({ width:"0px", height:"0px" }, 3000 ); $('#blue_abs').animate({ width:"200px", height:"200px" }, 3000 ); }); $('#stopAnimate').click(function(){ $('#red_abs').stop(); $('#green_abs').stop(); $('#blue_abs').stop(); }); $('#returnAnimate').click(function(){ $('#red_abs').animate({ width:"100px", height:"100px" }, 3000 ); $('#green_abs').animate({ width:"100px", height:"100px" }, 3000 ); $('#blue_abs').animate({ width:"100px", height:"100px" }, 3000 ); });

Важно отметить, что:

  • - свойства должны быть обозначены без пробелов, последующее слово с большой буквы, т.е. "borderWidth" вместо "border-width",
  • - поддерживаются только те свойства, значения которых выражаются числами.
  • - также в качестве значений свойств могут быть использованы значения "hide", "show" и "toggle"".

Такой вот получился длинный урок. Поэксперементируйте с методами которые предоставляет jQuery для управления видимостью объектов. Если у вас возникнут вопросы, пожалуйста, задавайте.

Автор: Сергей Зарубин

Дата: 2011-06-15

Колличество просмотров: 26776

Нравится

Комментарии к заметке:

Комментарий добавил(а): artventure
Дата: 2011-08-06

А как можно на одно кнопку например "далее", плавно убирать одно изображение и на его месте показывать другое. Типа простой фото галереи?

Комментарий добавил(а): Сергей Зарубин
Дата: 2011-08-07

Интересный вопрос. Как раз сейчас готовлю цикл статей о формах.
( Анонс статей)
И в статье "Обработка формы на jQuery" непременно рассмотрю его.
А пока, в качестве примера, код на JavaScript


Код:


<input type=image src="mini_img/img1.jpg" <br /> onClick="this.src='mini_img/img2.jpg'" <br /> onMouseOut="for (i=1; i&lt;=100000; i=i+1){}; <br /> this.src='mini_img/img1.jpg'" />



Добавить новый комментарий


Введите число с картинки:

captcha