jQuery — Эффекты — Скрытие и отображение

jQuery предоставляет простой интерфейс для выполнения различных поразительных эффектов.

Методы эффектов jQuery позволяют быстро реализовать常用的 эффекты с минимальной настройкой.

jQuery hide() и show()

Вы можете использоватьhide()иshow()Методы скрывают и отображают элементы HTML.

Ниже приведен пример использования методов hide() и show():

//　Скрытие нормального отображаемого абзаца
$("#hide-btn").click(function(){
　　$("p").hide();
});
//　Отображение скрытого абзаца
$("#show-btn").click(function(){
　　$("p").show();
});

Этоhide() Синтаксис метода:

$(selector).hide(duration,　easing,　callback);

Этоshow()Синтаксис метода:

$(selector).show(duration,　easing,　callback);

hide()иshow()Метод принимает три необязательных параметра:

• duration -определяет, как долго будет продолжаться эффект.ПродолжительностьСколько времени. Возможные значения: "slow", "fast" или миллисекунды

• easing -указывает на функцию сглаживания, используемую для перехода. Возможные значения: «swing», «linear»

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

Ниже приведен пример использования методов hide() и show() для демонстрации:durationПараметры:

$("#hide-btn").click(function(){
　　$("p").hide(1000);
});
$("#show-btn").click(function(){
　　$("p").show(1000);
});

Ниже приведен пример использования методов hide() и show() для демонстрации:Обратный вызовПараметры:

$("#hide-btn").click(function(){
　　$("div").hide(1000,　function(){
　　　　alert("DIV был скрыт");
　　});
});
$("#show-btn").click(function(){
　　$("div").show(1000,　function(){
　　　　alert("DIV был отображен");
　　});
});

Анимация всех интервалов (в данном примере это слова) быстро скрывает, завершая каждый анимационный эффект в 200 миллисекундах:

$("button").click(function(){
　　$("span:last-child").hide("fast",　function(){
$(this).prev().hide("fast",　arguments.callee);
　　});
});

Метод jQuery toggle()

Мы также можем использоватьtoggle()Метод переключается между скрытием и показом HTML элементов.

Если выбранный элемент最初 отображается, он будет скрыт; если скрыт, он будет отображен.

Следующий пример скрывает и показывает все элементы HTML при нажатии на кнопку.<p>Переключение между элементами:

$("button").click(function(){
　　$("p").toggle(1500);
});

toggle()Синтаксис метода такой:

$(selector).toggle(duration, easing, callback);

toggle()Метод принимает три необязательных параметра:

• duration　 -определяет, как долго будет продолжаться эффект.ПродолжительностьКак долго. Возможные значения: «slow», «fast» или миллисекунды

• easing -указывает на функцию сглаживания, используемую для перехода. Возможные значения: «swing», «linear»

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

Руководство по эффектам jQuery

Для полных эффектов, пожалуйста, посетите нашРуководство пользователя jQuery Effects.