V tomto článku uvidíme, jak používat různé metody JQuery pro generování animací.
hide() A show()Metoda hide() jednoduše nastaví styl inline display: none pro vybrané položky. Naopak metoda show() obnovuje vlastnosti zobrazení.
Podívejme se na pří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 prvním případě se odstavec skryje, když kliknete na tlačítko (hide-btn), ve druhém případě se odstavec zobrazí po kliknutí na tlačítko (show-btn).
Můžete také zadat parametr trvání, chcete-li animovat efekt show a hide po určitou dobu.
Dobu trvání lze zadat pomocí jednoho z předřetězcůdefinite 'slow' o 'fast'nebo v řádu milisekund, pro větší přesnost; vyšší hodnoty znamenají pomalejší animace.
<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>Řetězec předdefinita 'fast' označuje dobu trvání 200 milisekund, zatímco řetězec 'slow' udává dobu trvání 600 milisekund.
Můžeme specifikovat funkci callback které se mají provést po dokončení metody show() nebo 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>Metoda jQuery toggle() zobrazit nebo skrýt položky takovým způsobem, že pokud je položka původně zobrazena, bude skryta; naopak pokud je skrytý, zobrazí se (prakticky přepíná jeho viditelnost).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Podobně můžete zadat parametr duration pro metodu toggle(), takovým způsobem, aby animoval přechod mezi viditelnými a skrytými podobnými metodami 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>Podobně můžete také určit funkci callback pro metodu 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žít metody jQuery fadeIn()e fadeOut() zobrazit nebo skrýt prvky HTML, postupně zvyšovat nebo snižovat jejich neprůhlednost a vytvářet efekt blednutí.
<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>Stejně jako ostatní metody efektů jQuery můžete pro metody volitelně zadat parametr trvání nebo rychlosti fadeIn()e fadeOut(), aby bylo možné ovládat dobu slábnutí. Dobu trvání lze zadat pomocí jednoho z předřetězcůdefinite 'slow' o 'fast'nebo v řádu milisekund; vyšší hodnoty znamenají pomalejší animace.
<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>účinek metod fadeIn() / fadeOut() Je to podobné jako show() / hide(), ale na rozdíl od metod show() / hide(), první pouze animují neprůhlednost cílových prvků a neanimují jejich velikost.
Můžete také určit funkci callback spustit po dokončení metod 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()Metoda jQuery fadeToggle() zobrazí nebo skryje vybrané prvky animací jejich neprůhlednosti tak, že pokud je prvek zpočátku zobrazen, bude vybledlý; pokud byl skrytý, zmizí (tj. přepne efekt blednutí).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Můžete také zadat parametr životnosti pro metodu fadeToggle() co se týče metod fadeIn() / fadeOut(), pro ovládání trvání nebo rychlosti animace prolínání.
<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>Metoda fadeToggle() má také schopnost určit funkci 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()Metoda jQuery fadeTo() je to podobné jako u metody fadeIn(), ale na rozdíl od metody fadeIn(), metoda fadeTo() umožňuje prolínat prvky až na určitou úroveň krytí.
$(selector).fadeTo(speed, opacity, callback);Požadovaný parametr opacity udává konečnou neprůhlednost cílových prvků, což může být číslo mezi 0 a 1. Parametr duration o speed je to také vyžadováno pro tuto metodu, která určuje dobu trvání prolínání animace.
<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()Metoda jQuery slideUp() e slideDown() slouží ke skrytí nebo zobrazení prvků HTML postupným zmenšováním nebo zvyšováním jejich výšky (tj. posouváním nahoru nebo dolů).
<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>Stejně jako ostatní metody efektů jQuery můžete pro metody volitelně zadat parametr trvání nebo rychlosti slideUp() e slideDown() pro ovládání délky animace snímku. Dobu trvání lze zadat pomocí jednoho z předřetězcůdefinite 'slow' o 'fast'nebo v řádu milisekund; vyšší hodnoty znamenají pomalejší animace.
<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 také zadat funkci zpětného volání, která se má provést po dokončení metody 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()Metoda jQuery slideToggle() zobrazit nebo skrýt vybrané prvky animací jejich výšky, takže pokud je prvek zpočátku zobrazen, bude rolován nahoru; pokud je skrytý, bude rolován dolů, tj. přepíná mezi metodami slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Podobně můžete zadat parametr životnosti pro metodu slideToggle() Přijít 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>Podobně můžete také zadat funkci zpětného volání pro metodu 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()Metoda jQuery animate() používá se k vytváření vlastních animací. Metoda animate() slouží k animaci numerických CSS vlastností, jako např width, height, margin, padding, opacity, top, left atd. ale nečíselné vlastnosti jako color o background-color nelze je animovat pomocí základní funkce jQuery.
Základní syntaxe metody animate() je to následující:
$(selector).animate({ properties }, duration, callback);Parametry metody animate() mají následující významy:
'slow' o 'fast'nebo v řádu milisekund; vyšší hodnoty znamenají pomalejší animace.Níže je uveden jednoduchý příklad metody animate() který po kliknutí na tlačítko oživí obrázek z jeho původní pozice doprava o 300 pixelů.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Pomocí této metody můžete také animovat více vlastností prvku najednou animate(). Všechny vlastnosti byly animovány ve stejnou dobu bez jakéhokoli zpoždění.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Můžete také animovat více vlastností prvku jednu po druhé jednotlivě, ve frontě pomocí funkce zřetězení jQuery.
Následující příklad ukazuje animaci jQuery ve frontě nebo zřetězenou, kde každá animace začne po dokončení předchozí animace na prvku. Funkci zřetězení uvidíme v budoucím č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 také možné definish relativní hodnoty pro animované vlastnosti. Pokud je hodnota uvedena s předponou += o -=, cílová hodnota se vypočítá přičtením nebo odečtením zadaného čísla od aktuální hodnoty vlastnosti.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Kromě číselných hodnot může každá vlastnost přijímat řetězce 'show', 'hide' e 'toggle'. Bude to velmi užitečné v situaci, kdy chcete vlastnost animovat z aktuální hodnoty na počáteční hodnotu a naopak.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Metoda jQuery stop() se používá k zastavení aktuálně spuštěných animací nebo efektů jQuery na vybraných prvcích před dokončením.
Základní syntaxe metody stop() jQuery lze zadat pomocí:
$(selector).stop(stopAll, goToEnd);Parametry ve výše uvedené syntaxi mají následující význam:
false, to znamená, že se zastaví pouze aktuální animace, zbytek animací ve frontě se provede později.false.Zde je jednoduchý příklad demonstrující metodu stop() ve skutečné akci, kde můžete spustit a zastavit animaci kliknutím na tlačítko.
<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>Zde je další příklad této metody, kdy pokud znovu kliknete na tlačítkoSlide Toggle” po spuštění animace, ale před jejím dokončením, se animace okamžitě spustí v opačném směru od uloženého počátečního bodu.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Při vytváření animovaného efektu vznášení je jedním z nejběžnějších problémů, se kterými se můžete setkat, několik animací ve frontě, když rychle umístíte a odstraníte kurzor myši. Proč v této situaci mouseenter gli mouseleave události se spouštějí rychle před dokončením animace. Abyste se tomuto problému vyhnuli a vytvořili pěkný a hladký efekt hoveru, můžete přidat stop(true, true)do řetězce metod, takto:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Příkazy JavaScriptu se provádějí řádek po řádku. Protože však dokončení efektu jQuery nějakou dobu trvá, může se stát, že kód dalšího řádku běží, zatímco předchozí efekt stále běží. Aby se tomu zabránilo, jQuery poskytuje funkci zpětného volání pro každou metodu efektu.
Funkce zpětného volání je funkce, která se spustí po dokončení efektu. Funkce zpětného volání je předána jako argument metodám efektu a obvykle se objevují jako poslední argument metody. Například základní syntaxe efektové metody jQuery slideToggle() s funkcí zpětného volání, kterou lze zadat takto:
$(selector).slideToggle(duration, callback);Zvažte následující příklad, kam jsme umístili příkazy slideToggle()e alert()jeden vedle druhého. Pokud tento kód vyzkoušíte, upozornění se zobrazí okamžitě po kliknutí na přepínací tlačítko, aniž byste čekali na dokončení efektu přepínání snímku.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>A zde je upravená verze předchozího příkladu, kam jsme vložili příkaz alert() uvnitř funkce zpětného volání pro metodu slideToggle(). Pokud tento kód vyzkoušíte, po dokončení efektu přepínání snímku se zobrazí varovná zprá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>Stejně tak můžete defidokončit funkce zpětného volání pro ostatní metody efektu jQuery, jako je např show(), hide(), fadeIn(), fadeOut(), animate(), atd.
<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>Pokud vyzkoušíte ukázkový kód výše, zobrazí se stejná varovná zpráva dvakrát pro každou položku <h1> e <p>, po kliknutí na tlačítko aktivovat.
BlogInnovazione.it
Námořní sektor je skutečnou globální ekonomickou velmocí, která se dostala na 150miliardový trh...
Minulé pondělí Financial Times oznámily dohodu s OpenAI. FT licencuje svou prvotřídní žurnalistiku…
Miliony lidí platí za streamovací služby a platí měsíční předplatné. Je obecný názor, že jste…
Společnost Coveware od společnosti Veeam bude i nadále poskytovat služby reakce na incidenty v oblasti kybernetického vydírání. Coveware nabídne forenzní a sanační schopnosti…