В тази статия ще видим как да използваме различни JQuery методи за генериране на анимации.
hide() И show()Методът hide() просто задава стила вграден display: none за избрани елементи. Обратно, методът show() възстановява свойствата на дисплея.
Да видим пример:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>В първия случай параграфът е скрит, когато щракнете върху бутона (hide-btn), във втория случай параграфът се показва, когато щракнете върху бутона (show-btn).
Можете също така да зададете параметъра за продължителност, за да анимирате ефекта на показване и скриване за определен период от време.
Продължителностите могат да бъдат зададени с помощта на един от предварителните низовеdefiNite 'slow' o 'fast', или в няколко милисекунди, за по-голяма прецизност; по-високите стойности показват по-бавни анимации.
<script>
$(document).ready(function(){
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function(){
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(50);
$("p.very-slow").hide(2000);
});
// Show hidden paragraphs with different speeds
$(".show-btn").click(function(){
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(50);
$("p.very-slow").show(2000);
});
});
</script>Низът predefiНита 'fast' показва продължителност от 200 милисекунди, докато низът 'slow' показва продължителността от 600 милисекунди.
Можем да посочим функция на callback да се изпълни след завършване на метода show() или dell hide()
<script>
$(document).ready(function(){
// Display alert message after hiding paragraphs
$(".hide-btn").click(function(){
$("p").hide("slow", function(){
// Code to be executed
alert("The hide effect is completed.");
});
});
// Display alert message after showing paragraphs
$(".show-btn").click(function(){
$("p").show("slow", function(){
// Code to be executed
alert("The show effect is completed.");
});
});
});
</script>Методът jQuery toggle() показване или скриване на елементи по такъв начин, че ако елементът е първоначално показан, той ще бъде скрит; и обратно, ако е скрит, ще се покаже (на практика превключва видимостта му).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>По същия начин можете да посочите параметъра duration за метода toggle(), по такъв начин, че да анимира прехода между видими и скрити, като методи show() e hide()
<script>
$(document).ready(function(){
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>По същия начин можете също да зададете функция на callback за метода toggle().
<script>
$(document).ready(function(){
// Display alert message after toggling paragraphs
$(".toggle-btn").click(function(){
$("p").toggle(1000, function(){
// Code to be executed
alert("The toggle effect is completed.");
});
});
});
</script>fadeIn() e fadeOut()Можете да използвате jQuery методи fadeIn()e fadeOut() за показване или скриване на HTML елементи, постепенно увеличаване или намаляване на тяхната непрозрачност и създаване на ефект на избледняване.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>Подобно на други методи за ефекти на jQuery, можете по желание да посочите параметър за продължителност или скорост за методите fadeIn()e fadeOut(), за да контролирате продължителността на избледняването. Продължителностите могат да бъдат зададени с помощта на един от предварителните низовеdefiNite 'slow' o 'fast', или в няколко милисекунди; по-високите стойности показват по-бавни анимации.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>ефекта от методите fadeIn() / fadeOut() То е подобно на show() / hide(), но за разлика от методите show() / hide(), първите само анимират непрозрачността на целевите елементи и не анимират техния размер.
Също така можете да посочите функция на callback да се стартира след завършване на методите fadeIn() / fadeOut().
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>fadeToggle()Методът jQuery fadeToggle() показва или скрива избрани елементи чрез анимиране на тяхната непрозрачност, така че ако елементът се покаже първоначално, той ще изчезне; ако е бил скрит, ще изчезне (т.е. превключете ефекта на избледняване).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Можете също така да посочите параметъра за продължителност на живота за метода fadeToggle() що се отнася до методите fadeIn() / fadeOut(), за да контролирате продължителността или скоростта на избледняващата анимация.
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>Методът fadeToggle() също има способността да указва функция callback.
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>fadeTo()Методът jQuery fadeTo() това е подобно на метода fadeIn(), но за разлика от метода fadeIn(), Методът fadeTo() ви позволява да смесвате елементи до определено ниво на непрозрачност.
$(selector).fadeTo(speed, opacity, callback);Необходимият параметър opacity определя крайната непрозрачност на целевите елементи, която може да бъде число между 0 и 1. Параметърът duration o speed той също е необходим за този метод, който определя продължителността на затихването на анимацията.
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>slideUp() e slideDown()Методът jQuery slideUp() e slideDown() се използват за скриване или показване на HTML елементи чрез постепенно намаляване или увеличаване на височината им (т.е. превъртане нагоре или надолу).
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});
// Slide down hidden paragraphs
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>Подобно на други методи за ефекти на jQuery, можете по желание да посочите параметър за продължителност или скорост за методите slideUp() e slideDown() за да контролирате продължителността на анимацията на слайда. Продължителностите могат да бъдат зададени с помощта на един от предварителните низовеdefiNite 'slow' o 'fast', или в няколко милисекунди; по-високите стойности показват по-бавни анимации.
<script>
$(document).ready(function(){
// Sliding up displayed paragraphs with different speeds
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// Sliding down hidden paragraphs with different speeds
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>Можете също така да посочите функция за обратно извикване, която да се изпълни след завършване на метода slideUp() o slideDown().
<script>
$(document).ready(function(){
// Display alert message after sliding up paragraphs
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// Code to be executed
alert("The slide-up effect is completed.");
});
});
// Display alert message after sliding down paragraphs
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// Code to be executed
alert("The slide-down effect is completed.");
});
});
});
</script>slideToggle()Методът jQuery slideToggle() показване или скриване на избрани елементи чрез анимиране на тяхната височина, така че ако елементът е първоначално показан, той ще бъде превъртен нагоре; ако е скрито, ще се превърта надолу, т.е. превключва между методите slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>По същия начин можете да посочите параметъра за продължителност на живота за метода slideToggle() Ела slideUp() e slideDown().
<script>
$(document).ready(function(){
// Slide Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>По подобен начин можете също да посочите функция за обратно извикване за метода slideToggle().
<script>
$(document).ready(function(){
// Display alert message after slide toggling paragraphs
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// Code to be executed
alert("The slide-toggle effect is completed.");
});
});
});
</script>animate()Методът jQuery animate() използва се за създаване на персонализирани анимации. Методът animate() се използва за анимиране на числени CSS свойства, като напр width, height, margin, padding, opacity, top, left и т.н. но нечислови свойства като color o background-color те не могат да бъдат анимирани с помощта на основна функционалност на jQuery.
Основният синтаксис на метода animate() това е следното:
$(selector).animate({ properties }, duration, callback);Параметри на метода animate() имат следните значения:
'slow' o 'fast', или в няколко милисекунди; по-високите стойности показват по-бавни анимации.По-долу е даден прост пример за метода animate() който анимира изображение от първоначалната му позиция вдясно с 300 пиксела при щракване на бутон.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Можете също така да анимирате няколко свойства на елемент заедно, като използвате метода animate(). Всички свойства бяха анимирани едновременно без никакво забавяне.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Можете също така да анимирате множество свойства на елемент едно по едно поотделно, в опашка, като използвате функцията за конкатенация на jQuery.
Следващият пример показва поставена на опашка или верижна jQuery анимация, където всяка анимация ще започне след завършване на предишната анимация на елемента. Ще видим функцията за конкатенация в бъдеща статия.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>Възможно е също definish относителни стойности за анимирани свойства. Ако стойността е посочена с префикс += o -=, целевата стойност се изчислява чрез добавяне или изваждане на определеното число от текущата стойност на свойството.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>В допълнение към числовите стойности всяко свойство може да приема низове 'show', 'hide' e 'toggle'. Ще бъде много полезно в ситуация, в която просто искате да анимирате свойството от текущата му стойност към първоначалната му стойност и обратно.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Методът jQuery stop() се използва за спиране на изпълняваните в момента jQuery анимации или ефекти върху избрани елементи преди завършване.
Основният синтаксис на метода stop() jQuery може да бъде даден с:
$(selector).stop(stopAll, goToEnd);Параметрите в горния синтаксис имат следните значения:
false, това означава, че само текущата анимация ще бъде спряна, останалите анимации в опашката ще бъдат изпълнени по-късно.false.Ето един прост пример, демонстриращ метода stop() в реално действие, където можете да стартирате и спирате анимацията при натискане на бутон.
<script>
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=150px"}, 2000);
});
// Stop running animation
$(".stop-btn").click(function(){
$("img").stop();
});
// Start animation in the opposite direction
$(".back-btn").click(function(){
$("img").animate({left: "-=150px"}, 2000);
});
// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>Ето още един пример за този метод, когато щракнете върху бутона отновоSlide Toggle” след стартиране на анимацията, но преди да завърши, анимацията веднага ще започне в обратна посока от запазената начална точка.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Докато създавате анимиран ефект на курсора, един от най-честите проблеми, които може да срещнете, е множество анимации, поставени на опашка, когато бързо поставите и премахнете курсора на мишката. Защо в тази ситуация, mouseenter ГИТ mouseleave събитията се задействат бързо, преди анимацията да завърши. За да избегнете този проблем и да създадете приятен и плавен ефект на задържане, можете да добавите stop(true, true)към веригата на методите, така:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript операторите се изпълняват ред по ред. Въпреки това, тъй като jQuery ефектът отнема известно време, за да завърши, кодът на следващия ред може да се изпълнява, докато предишният ефект все още работи. За да предотврати това да се случи, jQuery предоставя функция за обратно извикване за всеки метод на ефекта.
Функцията за обратно извикване е функция, която се изпълнява след завършване на ефекта. Функцията за обратно извикване се предава като аргумент на методите на ефекта и те обикновено се появяват като последен аргумент на метода. Например основният синтаксис на метода на ефекта jQuery slideToggle() с функция за обратно извикване, която може да бъде зададена както следва:
$(selector).slideToggle(duration, callback);Разгледайте следния пример, където сме поставили твърденията slideToggle()e alert()един до друг. Ако изпробвате този код, предупреждението ще се появи веднага след щракване върху бутона за превключване, без да чака ефектът за превключване на слайда да завърши.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>И тук е модифицираната версия на предишния пример, където вмъкнахме израза alert() вътре във функция за обратно извикване за метода slideToggle(). Ако опитате този код, предупредителното съобщение ще се появи, след като ефектът на превключване на слайда приключи.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>По същия начин можете defiзавършете функциите за обратно извикване за другите методи за ефект на jQuery, като напр show(), hide(), fadeIn(), fadeOut(), animate()и т.н.
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Ако изпробвате примерния код по-горе, ще получите едно и също предупредително съобщение два пъти за всеки елемент <h1> e <p>, след като щракнете върху бутона за активиране.
BlogInnovazione.it
Coveware от Veeam ще продължи да предоставя услуги за реакция при инциденти с кибер изнудване. Coveware ще предлага криминалистика и възможности за възстановяване...
Прогнозната поддръжка революционизира сектора на петрола и газа с иновативен и проактивен подход към управлението на инсталациите.…
CMA на Обединеното кралство издаде предупреждение относно поведението на Big Tech на пазара на изкуствен интелект. Там…
Указът „Case Green“, формулиран от Европейския съюз за повишаване на енергийната ефективност на сградите, приключи своя законодателен процес с...