К базовым эффектам в jQuery относятся эффекты скрытия и отображения элементов, которые достигаются с помощью методов show(),
hide() и toggle().
Так, например, мы можем скрывать и отображать элементы по клику по кнопке:
<ul>
<li>Java</li>
<li>C/C++</li>
<li>JavaScript</li>
</ul>
<button id="show">Показать</button>
<button id="hide">Скрыть</button>
<script type="text/javascript">
$(function() {
$('button#show').click(function(){
$('ul').show();
});
$('button#hide').click(function(){
$('ul').hide();
});
});
</script>
Таким образом, при нажатии на кнопку "Показать", будет срабатывать метод $('ul').show(), а при нажатии на кнопку "Скрыть",
список будет скрыт с помощью метода $('ul').hide().
Тот же самый эффект мы могли бы сделать, использовав в обоих случаях метод toggle, который просто переключает видимость:
$(function() {
$('button').click(function(){
$('ul').toggle();
});
});
Теперь разберем эти методы подробнее.
Метод hide присваивает у элементов свойству стиля display значение none, тем самым делая элемент скрытым.
То же самое мы могли проделать с помощью следующего выражения: css('display', 'none'). Метод hide может принимать следующие формы:
hide(): метод без параметров
hide([duration][, complete]): принимает два необязательных параметра. Параметр duration указывает
как долго анимация элемента будет длиться. По умолчанию его значение равно 400 миллисекунд.
Параметр complete представляет функцию, вызываемую методом по завершению анимации
hide([duration] [, easing][, complete]): то же самое, только добавляется параметр easing, который принимает название функции плавности анимации в виде строки. По умолчанию его значение равно "swing".
Например, мы можем использовать медленную (hide('slow')) или быструю анимацию (hide('fast')), длительность которых равна соответственно
600 и 200 миллисекунд.
Например:
$('button#hide').click(function(){
$('ul').hide('slow', function(){
alert('Элемент скрыт');
});
});
Метод show отображает элемент, устанавливая то значение для свойства display, которое было до скрытия. Например, если до
скрытия элемента у него был определен стиль display: inline, то и после отображения он будет иметь значение inline.
Если же стиль не был определен явно, то он будет иметь значение display: block.
Метод show имеет те же самые формы, что и метод hide:
show()
show([duration][, complete])
show([duration] [, easing][, complete])
Допустим, что у нас есть блок параграфов на странице. Единожды у нас виден только один. И мы хотим с помощью кнопок переключать параграфы (то есть фактически изменять их видимость):
<html>
<head>
<meta charset='utf-8'>
<script src="jquery-1.10.1.min.js"></script>
<style>
#langs p {display:none;}
#langs p.first {display:block;}
</style>
</head>
<body>
<h3>Выбранный язык</h3>
<div id="langs">
<p class='first'>Java</p>
<p>C/C++</p>
<p>PHP</p>
<p class='last'>JavaScript</p>
</div>
<button id="prev">Назад</button>
<button id="next">Вперед</button>
<script type="text/javascript">
$(function() {
var current = $("div#langs p").first();
$('#next').click(function(){
$(current).not('.last').hide("fast", function() {
current = $(current).next('p');
$(current).show("fast");
});
});
$('#prev').click(function(){
$(current).not('.first').hide("fast", function() {
current = $(current).prev('p');
$(current).show("fast");
});
});
});
</script>
</body>
</html>
Сначала в устанавливаем стили, чтобы вначале был видимым только один блок.
С помощью выражения var current = $("div#langs p").first(); получаем текущий просматриваемый блок. При загрузке страницы это
будет самый первый блок или блок с классом first.
И далее, используя селекторы и фильтры, переключаем видимость через методы show и hide и устанавливаем новый текущий просматриваемый блок.
Метод toggle сочетает функционал методов hide и show и, если элемент отображается на странице, то ему присваивается стиль
display: none. А если элемент скрыт и имеет значение display: none, то он отображается
(свойство display получает то значение, которое было до скрытия. Если свойство не было определено явно, то оно будет иметь
значение display: block).
Метод toggle имеет те же самые формы, что и метод hide:
toggle()
toggle([duration][, complete])
toggle([duration] [, easing][, complete])