jQuery эффект - скольжение

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

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

jQuery методы скольжения

Используя jQuery, мы можем создавать эффекты скольжения на элементах.

У нас есть следующие методы jQuery слайд-шоу:

• slideUp()

• slideDown()

• slideToggle()

Ниже мы покажем, как использовать каждый метод скольжения.

jQuery slideUp() и slideDown()

slideUp()Метод скрывает выбранный элемент скользящим способом.

slideDown()Метод показывает выбранный элемент скользящим способом.

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

//　Скроллинг вверх абзаца
　$("#btn1").click(function(){
　　　　　　$("p").slideUp();
});
//　Скроллинг вниз абзаца
　$("#btn2").click(function(){
　　　　　　$("p").slideDown();
});

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

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

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

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

независимо отslideUp()иslideDown()Метод принимает три опциональных параметра:

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

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

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

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

$("#btn1").click(function(){
　　$("p").slideUp(1500);
});
$("#btn2").click(function(){
　　$("p").slideDown(1500);
});

Ниже приведен пример с использованием slideUp() и slideDown()回调Параметры:

$("#btn1").click(function(){
　　$("div").slideUp(1500, function(){
　　　　alert("Скроллинг вверх завершен!");
　　});
});
$("#btn2").click(function(){
　　$("div").slideDown(1500, function(){
　　　　alert("Скроллинг вниз завершен!");
　　});
});

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

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

метод jQuery slideToggle()

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

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

Ниже приведен пример, который при нажатии на кнопку будет切换 между slideUp и slideDown всех<p>Переключение между slideUp и slideDown элементов:

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

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

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

slideToggle()Метод принимает три опциональных параметра:

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

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

• callback-Определите функцию, которую нужно вызвать после выполнения метода slideToggle()

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

Для полного руководства по эффектам, пожалуйста, посетите нашРуководство по эффектам jQuery.