JQuery Effects - Топ12 різні типи методів ефектів jQuery

• Вступ до ефектів jQuery

Вступ до ефектів jQuery

jQuery - одна з найпопулярніших бібліотек javascript, яка призначена для спрощення HTML DOM, тобто властивостей моделі об'єкта документа, таких як маніпуляції та обхід дерева. Інші властивості, такі як обробка подіями, анімація Ajax та CSS, також спрощені. Це відкритий і безкоштовна бібліотека, яка зазвичай використовується у 73% з 10 мільйонів веб-сайтів, які використовуються сьогодні. Основні характеристики jQuery включають селектори на основі елементів DOM, маніпуляції та обхід, що робить роботу над jQuery набагато простішою та зручнішою. У цій темі ми дізнаємось про ефекти jQuery.

Він використовується для надання дуже простого вигляду інтерфейсу, щоб робити різні види дивовижних ефектів. Ці методи дозволяють швидко використовувати та застосовувати найчастіше використовувані функції-ефекти, поряд із голою до мінімальної конфігурації. Команда для показу та приховування елементів майже однакова, як очікували б усі, хто бажає їх бачити. Команда show () використовується для показу елементів у повністю загорнутому наборі, а для їх приховування використовується команда hidash ().

Різні методи jQuery Effect:

Тут ми обговорюємо деякі різні типи методів ефекту jQuery

1) анімація ()

Метод анімації використовується для виконання спеціальної анімації для набору властивостей CSS. Цей метод використовується для зміни стану елемента з одного стану в інший разом із стилями CSS. Значення властивості змінюється поступово таким чином, щоб можна було досягти анімованого ефекту. Варто зазначити, що анімовані лише числові значення, такі як маржа: 40px. З іншого боку, значення рядків не можуть бути анімовані, такі як колір фону: зелений. Це знову ж таки виняток для рядків, таких як показ, приховування та перемикання.

Синтаксис

(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 ()

Цей спосіб такий же, як запропонований ім'ям. Це використовується для очищення черги та видалення всіх елементів з черги, які не були запущені. Функція завершить свій запуск після запуску. Це пов'язано з двома методами, а саме. чергу () і dequeue ().

Синтаксис

$(selector).clearQueue(NameOfQueue)

Приклад

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

6) фініш ()

Цей метод у jQuery використовується для завершення або закінчення поточного запущеного аніматора, оскільки він використовується для зупинки всіх анімацій, які зараз запущені, і використовується для видалення всіх анімаційних очей. Він також використовується для завершення всіх анімацій для різноманітного набору вибраних елементів. Цей метод подібний до таких методів, як .stop, який має істинні параметри. Основна відмінність цього методу від фінішу полягає в тому, що метод обробки використовується для зупинки та паузи типів властивостей елементів CSS для всіх анімаційних очей.

Синтаксис

$(selector).finish(NameOfQueue)

Приклад

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

7) dequeue ()

Цей метод використовується для видалення наступної функції з черги, а потім використовується для виконання функції. Черга - це одна або кілька функцій, які знаходяться в трубопроводі, що очікує запуску. Цей метод 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 Effects з синтаксисом та прикладом. Ви також можете переглянути наступну статтю, щоб дізнатися більше -

1. Використання JQuery
2. Альтернативи jQuery
3. Команди запитів MySQL
4. Що таке процедура в SQL?
5. jQuery querySelector