Введение в эффекты jQuery

jQuery - одна из самых популярных библиотек javascript, предназначенная для упрощения HTML DOM, то есть свойств объектной модели документа, таких как манипулирование и обход дерева. Другие свойства, такие как обработка событий, анимация Ajax и CSS, также упрощены. Это бесплатная библиотека с открытым исходным кодом, которая обычно используется в 73% из 10 миллионов веб-сайтов, используемых сегодня. Основные функции jQuery включают селекторы на основе элементов DOM, манипулирование и обход, что делает работу с jQuery намного проще и удобнее. В этой теме мы познакомимся с эффектами jQuery.

Он используется для обеспечения очень простого интерфейса для создания различных удивительных эффектов. Эти методы позволяют быстро использовать и применять наиболее часто используемые функции-эффекты наряду с минимальными настройками. Команда для показа и скрытия элементов в значительной степени та же, что и любой желающий увидеть их. Команда Show () используется для отображения элементов в полностью обернутом наборе, а команда hide () - для их скрытия.

Различные методы jQuery-эффекта:

Здесь мы обсудим некоторые различные типы методов эффектов jQuery

1) Анимировать ()

Метод animate используется для выполнения настраиваемой анимации для набора свойств CSS. Этот метод используется для изменения состояния элемента из одного состояния в другое вместе со стилями CSS. Значение свойства изменяется постепенно, так что может быть достигнут анимационный эффект. Следует отметить, что анимируются только числовые значения, например, поле: 40px. С другой стороны, значения для строк нельзя анимировать, например background-color: green. Это снова идет с исключением строк, таких как show, hide и toggle.

Синтаксис

(selector).animate((styles), duration, easing, callback)

пример

$("label").click(func()(
$("#box").animate((height: "100px"));
));

2) Задержка ()

Как следует из названия, этот используется для установки задержки для всех функций, которые поставлены в очередь на выбранных элементах.

Синтаксис

$(selector).delay(duration, NameOfQueue)

пример

$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));

3) fadeToggle ()

Эта функция используется для переключения между функциями постепенного появления и исчезновения в разных полях. Если какой-либо элемент исчезает, то эта функция fadeToggle () может использоваться для их постепенного исчезновения. Элементы, которые находятся в скрытой форме, не будут отображаться как часть этого метода.

Синтаксис

$(selector).fadeToggle(duration, easing, callback)

пример

$("label").click(func()(
$("#box").fadeToggle();
));

4) fadeTo ()

Этот метод используется для изменения непрозрачности всех

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

Синтаксис

$(selector).fadeTo(duration, opacity, easing, callback)

пример

$("label").click(func()(
$("p").fadeTo(100, 0.9);
));

5) clearQueue ()

Этот метод такой же, как предлагается по названию. Это используется для очистки очереди и удаления всех элементов из очереди, которые не были запущены. Функция завершит свой запуск, как только она начнет работать. Это связано с двумя методами, а именно. queue () и dequeue ().

Синтаксис

$(selector).clearQueue(NameOfQueue)

пример

$("label").click(func()(
$("box").clearQueue();
));

6) закончить ()

Этот метод в jQuery используется для завершения или завершения текущего работающего аниматора, поскольку он используется для остановки всех анимаций, которые в данный момент запущены, и используется для удаления всех анимаций, поставленных в очередь. Он также используется для завершения всех анимаций для различного диапазона выбранных элементов. Этот метод похож на методы, такие как .stop, который имеет оба истинных параметра. Основное различие между этим методом и методом Finish заключается в том, что метод Finish используется для остановки и приостановки типов свойств элемента CSS всех анимаций в очереди.

Синтаксис

$(selector).finish(NameOfQueue)

пример

$("#complete").click(func()(
$("div1").finish();
));

7) dequeue ()

Этот метод используется для удаления следующей функции из очереди, а затем используется для выполнения функции. Очередь - это одна или несколько функций, которые находятся в конвейере и ожидают запуска. Этот метод удаления используется вместе с методом очереди. Один элемент может иметь несколько очередей. Очередь fx является наиболее распространенной, которая также является очередью по умолчанию.

Синтаксис

$(selector).dequeue(NameOfQueue)

пример

$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));

8) slideDown ()

Это еще один полезный метод в jQuery, который используется для перемещения вниз или отображения выбранных списков элементов. Здесь следует отметить, что он также работает с элементами, которые находятся в скрытом формате, и тип отображения отображается как ничего в случае CSS, но видимость не должна быть скрыта.

Синтаксис

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

пример

$("label").queue(func()(
$("p").slideDown();
));

9) slideUp ()

Метод slideUp () используется, чтобы скрыть все

выбранные элементы. Элементы, которые находятся в скрытой форме, не будут отображаться вообще. Это, следовательно, не влияет на макет страницы.

Синтаксис

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

пример

$("label").queue(func()(
$("p").slideUp();
));

10) slideDown ()

В отличие от метода slideUp () этот метод используется для отображения всех скрытых

элементы. Этот метод slidedown () работает со всеми элементами, которые также относятся к скрытым методам в случае методов jQuery, и имя также отображается в CSS, но видимость не скрыта.

Синтаксис

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

пример

$("label").queue(func()(
$("p").slideDown();
));

11) Переключить ()

Этот метод используется для переключения между показом и скрытием различных

основанные элементы. Этот метод используется для проверки видимости элементов. Метод show () используется для запуска, даже если элемент скрыт. Hide () запускается, даже когда элемент видим. Оба метода показывают и скрывают методы в комбинации, создают эффект переключения и, следовательно, метод toggle ().

Синтаксис

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

пример

$("label").queue(func()(
$("p").toggle();
));

12) slideToggle ()

Этот метод используется для переключения между функциями slideUp () и slideDown () для всех элементов на основе абзаца. Этот метод используется для проверки элементов, выбранных для видимости. SlideDown () - это функция, которая работает, когда элемент скрыт. В противоположность этому, элемент slideUp () должен запускаться, если элемент виден.

Синтаксис

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

пример

$("label").queue(func()(
$("p").slideToggle();
));

jQuery позволяет нам добавлять эффекты на веб-страницу, предоставляя множество функций, которые можно назначать различным селекторам. Именно от вас зависит, как вы хотите, чтобы ваши сайты выглядели более эффектно. Надеюсь, вам понравилась наша статья. Следите за обновлениями на нашем блоге, чтобы узнать больше подобных статей

Рекомендуемые статьи

Это руководство по эффектам jQuery. Здесь мы обсудили различные типы методов эффектов jQuery с синтаксисом и примером. Вы также можете посмотреть следующую статью, чтобы узнать больше -

  1. Использование JQuery
  2. Альтернативы jQuery
  3. MySQL Query Commands
  4. Что такое процедура в SQL?
  5. jQuery querySelector

Категория:

Разработка программного обеспечения