Как создать свой сайтУроки jQuery → Урок 8. Визуальные эффекты

jQuery - Урок 8. Визуальные эффекты

Методы видимости - 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="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les8_ex1"></div> <input type="button" value="Скрыть" onclick="hideDiv();"> <input type="button" value="Показать" onclick="showDiv();"> </body> </html>
Код функций (на странице script.js):
function hideDiv(){ $('#les8_ex1').hide(); } function showDiv(){ $('#les8_ex1').show(); }
Ну и стили на style.css в принципе на ваше усмотрение:
#les8_ex1{ width:400px; height:100px; background:#666699; border:1px solid #333366; margin-bottom:20px; }
Страница style.css здесь приведена не случайно. Все дело в том, что скрыть элемент можно и при помощи таблицы стилей, а не методом hide().

Например, если бы мы хотели, чтобы при загрузке страницы наш div был скрыт, то мы могли бы это сделать двумя способами:

Первый, использовать метод hide():
$(document).ready(init); function init(){ $('#les8_ex1').hide(); } function hideDiv(){ $('#les8_ex1').hide(); } function showDiv(){ $('#les8_ex1').show(); }


А второй - использовать свойство display CSS:
#les8_ex1{ width:400px; height:100px; background:#666699; border:1px solid #333366; margin-bottom:20px; display:none; }
Результат будет одинаков.

Эти же методы гораздо интереснее использовать с анимацией:

hide(speed, callback) - скрыть,

show(speed, callback) - показать,

toggle(speed, callback) - переключить (показать, если скрыты и наоборот), где:

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

callback - функция, которая будет выполняться после завершения анимации. Ее присутствие вовсе необязательно.

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


Итак, html-код:
<html> <head> <title>jQuery эффекты</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les8_ex2"></div> <input type="button" id="but1" value="Скрыть/Отобразить" onclick="hideShowDiv();"> </body> </html>
Код функции:
function hideShowDiv(){ $('#les8_ex2').toggle('slow'); }

Методы свертывания - slideDown(), slideUp() и slideToggle()

Эти методы также отвечают за видимость элементов, но работают по принципу свернуть элемент плавно снизу-вверх - развернуть элемент плавно свеху-вниз:

slideUp() - свернуть,

slideDown() - развернуть,

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

Пример:


Html-код:
<html> <head> <title>jQuery эффекты</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les8_ex3"></div> <input type="button" value="Свернуть" onclick="slideUpDiv();"> <input type="button" value="Развернуть" onclick="slideDownDiv();"> </body> </html>
Код функций (на странице script.js):
function slideUpDiv(){ $('#les8_ex3').slideUp(); } function slideDownDiv(){ $('#les8_ex3').slideDown(); }
Стили на style.css:
#les8_ex3{ width:100px; height:200px; background:#666699; border:1px solid #333366; margin-bottom:20px; }
Эти методы также можно использовать с анимацией:

slideUp(speed, callback) - свернуть,

slideDown(speed, callback) - развернуть,

slideToggle(speed, callback) - переключить (развернуть, если скрыты и наоборот), где:

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

callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.

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


Html-код:
<html> <head> <title>jQuery эффекты</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les8_ex4"></div> <input type="button" value="Свернуть/Развернуть" onclick="slideToggleDiv();"> </body> </html>
Код функций (на странице script.js):
function slideToggleDiv(){ $('#les8_ex4').slideToggle(7000); }

Методы исчезновения - fadeTo(), fadeOut() и fadeIn()

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

fadeOut(speed, callback) - уменьшает свойство opacity (прозрачность),

fadeIn(speed, callback) - увеличивает свойство opacity (прозрачность), где:

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

opacity - значение прозрачности, до которого оно будет уменьшено (число от 0 до 1).

callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.

Например:




Html-код:
<html> <head> <title>jQuery эффекты</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les8_ex5"></div> <input type="button" value="Исчезает (fadeOut)" onclick="fadeOutDiv();"> <input type="button" value="Появляется (fadeIn)" onclick="fadeInDiv();"> <div id="les8_ex6"></div> <input type="button" value="Бледнеет (fadeTo)" onclick="fadeToDiv();"> </body> </html>
Код функций (на странице script.js):
function fadeOutDiv(){ $('#les8_ex5').fadeOut(5000); } function fadeInDiv(){ $('#les8_ex5').fadeIn(5000); } function fadeToDiv(){ $('#les8_ex6').fadeTo(5000, 0.5); }
Комментировать здесь нечего.

Методы анимации - animate() и stop()

animate(params, options) - анимирует стилевые свойства, где:

params - атрибуты css, которые хотим анимировать ("width", "top", "border"...).

options - свойства анимации (в том числе скорость).

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

Например:




Html-код:
<html> <head> <title>jQuery эффекты</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les8_ex7"></div><div id="les8_ex8"></div> <input type="button" value="Запустить анимацию" onclick="animateDiv();"> <input type="button" value="Остановить анимацию" onclick="stopDiv();"> </body> </html>
Стили (на странице style.css):
#les8_ex7{ width:100px; height:100px; background:#666699; } #les8_ex8{ width:400px; height:200px; background:#666699; }
Код функций (на странице script.js):
function animateDiv(){ $('#les8_ex7').animate({ width:"400px", height:"200px" }, 3000 ); $('#les8_ex8').animate({ width:"100px", height:"100px" }, 3000 ); } function stopDiv(){ $('#les8_ex7').stop(); $('#les8_ex8').stop(); }
Несколько нюансов:

- свойства должны быть обозначены без пробелов, последующее слово с большой буквы, т.е. "borderWidth" вместо "border-width",

- поддерживаются только те свойства, значения которых выражаются числами.

- также в качестве значений свойств могут быть использованы значения "hide", "show" и "toggle".

Например, следующая функция:
function animateDiv(){ $('#les8_ex8').animate({ "height": "toggle" }, 1000 ); }
будет при каждом обращении менять высоту от 0 до заданной в стилях и обратно:




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



Предыдущий урок Вернуться в раздел Следующий урок 
Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт.

Уроки PHP Уроки PHP Уроки PHP Уроки PHP Уроки PHP Уроки PHP

Код кнопки:



Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.