Въведение в jQuery ефекти

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

Използва се за осигуряване на много прост изглеждащ интерфейс, за да се правят различни видове невероятни ефекти. Тези методи позволяват бързо използване и прилагане на най-често използваните функции-ефекти, заедно с голи до минимални конфигурации. Командата за показване и скриване на елементи е почти същата, каквато всеки би желал да ги види. Командата Show () се използва за показване на елементите в изцяло увит набор и команда hid () се използва за скриването им.

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

Тук обсъждаме някои различни видове методи на jQuery Effect

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 () се изпълнява дори когато елементът е видим. И двата метода показват и скриват в комбинация създава ефект на превключване и следователно методът превключва ().

Синтаксис

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

Категория:

Разработване на софтуер