V tomto článku uvidíme, ako používať rôzne metódy JQuery na generovanie animácií.
hide
() A show
()Metóda hide() jednoducho nastaví štýl inline display: none
pre vybrané položky. Naopak, metóda show() obnovuje vlastnosti zobrazenia.
Pozrime sa na príklad:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>
V prvom prípade sa odsek po kliknutí na tlačidlo (hide-btn
), v druhom prípade sa odsek zobrazí po kliknutí na tlačidlo (show-btn
).
Môžete tiež zadať parameter trvania, aby ste animovali efekt zobrazenia a skrytia na určitý čas.
Trvanie je možné špecifikovať pomocou jedného z pred reťazcovdefinoc 'slow'
o 'fast'
alebo v počte milisekúnd, pre väčšiu presnosť; vyššie hodnoty znamenajú pomalšie animácie.
<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>
Struna predefiNita 'fast'
označuje trvanie 200 milisekúnd, zatiaľ čo reťazec 'slow'
označuje trvanie 600 milisekúnd.
Môžeme špecifikovať funkciu callback
vykonať po dokončení metódy show()
alebo 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>
Metóda jQuery toggle()
zobraziť alebo skryť položky takým spôsobom, že ak je položka pôvodne zobrazená, bude skrytá; naopak ak je skrytý, zobrazí sa (prakticky prepína jeho viditeľnosť).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>
Podobne môžete zadať parameter duration
pre metódu toggle()
, takým spôsobom, aby sa animoval prechod medzi viditeľnými a skrytými podobnými metódami 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>
Podobne môžete zadať aj funkciu callback
pre metódu 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()
Môžete použiť metódy jQuery fadeIn()
e fadeOut()
zobraziť alebo skryť prvky HTML, postupne zvyšovať alebo znižovať ich nepriehľadnosť a vytvárať efekt miznutia.
<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>
Rovnako ako iné metódy efektov jQuery, môžete pre metódy voliteľne zadať parameter trvania alebo rýchlosti fadeIn()
e fadeOut()
, aby ste mohli kontrolovať trvanie slabnutia. Trvanie je možné špecifikovať pomocou jedného z pred reťazcovdefinoc 'slow'
o 'fast'
alebo za niekoľko milisekúnd; vyššie hodnoty znamenajú pomalšie animácie.
<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>
účinok metód fadeIn()
/ fadeOut()
Je to podobné ako show()
/ hide()
, ale na rozdiel od metód show()
/ hide()
, prvé animujú iba nepriehľadnosť cieľových prvkov a neanimujú ich veľkosť.
Môžete tiež určiť funkciu callback
spustiť po dokončení metód 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()
Metóda jQuery fadeToggle()
zobrazí alebo skryje vybrané prvky animáciou ich nepriehľadnosti tak, že ak je prvok zobrazený na začiatku, bude vyblednutý; ak bol skrytý, zmizne (t. j. prepne efekt miznutia).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>
Môžete tiež zadať parameter životnosti pre metódu fadeToggle()
čo sa týka metód fadeIn()
/ fadeOut()
, na ovládanie trvania alebo rýchlosti animácie slabnutia.
<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>
Metóda fadeToggle() má tiež schopnosť špecifikovať funkciu 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()
Metóda jQuery fadeTo()
je to podobné ako pri metóde fadeIn()
, ale na rozdiel od metódy fadeIn()
, metóda fadeTo()
umožňuje prelínať prvky až na určitú úroveň nepriehľadnosti.
$(selector).fadeTo(speed, opacity, callback);
Požadovaný parameter opacity
určuje konečnú nepriehľadnosť cieľových prvkov, ktorá môže byť číslom od 0 do 1. Parameter duration
o speed
je to potrebné aj pre túto metódu, ktorá špecifikuje trvanie zoslabenia animácie.
<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()
Metóda jQuery slideUp()
e slideDown()
sa používajú na skrytie alebo zobrazenie prvkov HTML postupným znižovaním alebo zvyšovaním ich výšky (t. j. posúvaním nahor alebo nadol).
<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>
Rovnako ako iné metódy efektov jQuery, môžete pre metódy voliteľne zadať parameter trvania alebo rýchlosti slideUp()
e slideDown()
na ovládanie trvania animácie snímky. Trvanie je možné špecifikovať pomocou jedného z pred reťazcovdefinoc 'slow'
o 'fast'
alebo za niekoľko milisekúnd; vyššie hodnoty znamenajú pomalšie animácie.
<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>
Môžete tiež zadať funkciu spätného volania, ktorá sa má vykonať po dokončení metódy 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()
Metóda jQuery slideToggle()
zobraziť alebo skryť vybrané prvky animáciou ich výšky, takže ak je prvok zobrazený na začiatku, bude rolovaný nahor; ak je skrytý, posunie sa nadol, t.j. prepína medzi metódami slideUp()
e slideDown()
.
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>
Podobne môžete zadať parameter životnosti pre metódu slideToggle()
Prísť 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>
Podobne môžete pre metódu zadať aj funkciu spätného volania 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()
Metóda jQuery animate()
používa sa na vytváranie vlastných animácií. Metóda animate()
slúži na animáciu numerických CSS vlastností, ako napr width
, height
, margin
, padding
, opacity
, top
, left
atď. ale nečíselné vlastnosti ako color
o background-color
nemožno ich animovať pomocou základnej funkcionality jQuery.
Základná syntax metódy animate()
je to nasledovné:
$(selector).animate({ properties }, duration, callback);
Parametre metódy animate()
majú nasledujúce významy:
'slow'
o 'fast'
alebo za niekoľko milisekúnd; vyššie hodnoty znamenajú pomalšie animácie.Nižšie je uvedený jednoduchý príklad metódy animate()
ktorý po kliknutí na tlačidlo oživí obrázok z jeho pôvodnej polohy doprava o 300 pixelov.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>
Pomocou tejto metódy môžete tiež animovať viacero vlastností prvku naraz animate()
. Všetky vlastnosti boli animované v rovnakom čase bez akéhokoľvek oneskorenia.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>
Pomocou funkcie zreťazenia jQuery môžete animovať viacero vlastností prvku jednu po druhej jednotlivo vo fronte.
Nasledujúci príklad ukazuje animáciu jQuery zaradenú do frontu alebo zreťazenú, pričom každá animácia sa spustí po dokončení predchádzajúcej animácie na prvku. Funkciu zreťazenia uvidíme v budúcom článku.
<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>
Je to tiež možné defirelatívne hodnoty animovaných vlastností. Ak je hodnota zadaná s predponou +=
o -=
, cieľová hodnota sa vypočíta pripočítaním alebo odčítaním zadaného čísla od aktuálnej hodnoty nehnuteľnosti.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>
Okrem číselných hodnôt môže každá vlastnosť akceptovať reťazce 'show'
, 'hide'
e 'toggle'
. Bude to veľmi užitočné v situácii, keď chcete nehnuteľnosť len animovať z jej aktuálnej hodnoty na počiatočnú hodnotu a naopak.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>
stop()
Metóda jQuery stop()
sa používa na zastavenie aktuálne spustených animácií alebo efektov jQuery na vybraných prvkoch pred dokončením.
Základná syntax metódy stop()
jQuery je možné zadať pomocou:
$(selector).stop(stopAll, goToEnd);
Parametre vo vyššie uvedenej syntaxi majú nasledujúci význam:
false
, to znamená, že sa zastaví iba aktuálna animácia, ostatné animácie vo fronte sa spustia neskôr.false
.Tu je jednoduchý príklad demonštrujúci metódu stop()
v reálnej akcii, kde môžete spustiť a zastaviť animáciu kliknutím na tlačidlo.
<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>
Tu je ďalší príklad tejto metódy, keď znova kliknete na tlačidloSlide Toggle
” po spustení animácie, ale pred jej dokončením sa animácia okamžite spustí v opačnom smere od uloženého počiatočného bodu.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>
Pri vytváraní animovaného efektu vznášania sa jedným z najbežnejších problémov, s ktorými sa môžete stretnúť, je viacero animácií v rade, keď rýchlo umiestnite a odstránite kurzor myši. Prečo v tejto situácii mouseenter
Gli mouseleave
udalosti sa spúšťajú rýchlo pred dokončením animácie. Aby ste sa vyhli tomuto problému a vytvorili pekný a hladký efekt vznášania, môžete pridať stop(true, true)
do reťazca metód, takto:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>
Príkazy JavaScript sa vykonávajú riadok po riadku. Keďže však dokončenie efektu jQuery nejaký čas trvá, kód ďalšieho riadku môže bežať, kým predchádzajúci efekt stále beží. Aby sa tomu zabránilo, jQuery poskytuje funkciu spätného volania pre každú metódu efektu.
Funkcia spätného volania je funkcia, ktorá sa spustí po dokončení efektu. Funkcia spätného volania sa odovzdáva ako argument metódam efektu a zvyčajne sa zobrazuje ako posledný argument metódy. Napríklad základná syntax efektovej metódy jQuery slideToggle()
s funkciou spätného volania, ktorá môže byť špecifikovaná takto:
$(selector).slideToggle(duration, callback);
Uvažujme o nasledujúcom príklade, kde sme umiestnili výroky slideToggle()
e alert()
jeden vedľa druhého. Ak vyskúšate tento kód, upozornenie sa zobrazí ihneď po kliknutí na prepínač bez čakania na dokončenie efektu prepínania.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>
A tu je upravená verzia predchádzajúceho príkladu, kde sme vložili príkaz alert()
vnútri funkcie spätného volania pre metódu slideToggle()
. Ak vyskúšate tento kód, po dokončení efektu prepínania snímky sa zobrazí varovná správa.
<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>
Rovnako tak môžete defidokončiť funkcie spätného volania pre ostatné metódy efektu jQuery, ako napr show()
, hide()
, fadeIn()
, fadeOut()
, animate()
, atď.
<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>
Ak vyskúšate vzorový kód uvedený vyššie, dostanete rovnakú varovnú správu dvakrát raz na položku <h1>
e <p>
, po kliknutí na tlačidlo aktivovať.
BlogInnovazione.it
Pojem Smart Lock Market sa vzťahuje na priemysel a ekosystém obklopujúci výrobu, distribúciu a používanie…
V softvérovom inžinierstve sú návrhové vzory optimálnym riešením problémov, ktoré sa bežne vyskytujú pri návrhu softvéru. Som ako…
Priemyselné značenie je široký pojem, ktorý zahŕňa niekoľko techník používaných na vytváranie trvalých značiek na povrchu…
Nasledujúce jednoduché príklady makier programu Excel boli napísané pomocou odhadovaného času čítania VBA: 3 minúty Príklad…