Ebben a cikkben látni fogjuk, hogyan használhatunk különböző JQuery metódusokat animációk generálására.
hide() És show()A hide() metódus egyszerűen beállítja a stílust display: none a kiválasztott tételekhez. Ezzel szemben a show() metódus visszaállítja a megjelenítési tulajdonságokat.
Lássunk egy példát:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Az első esetben a bekezdés el van rejtve, amikor rákattint a gombra (hide-btn), a második esetben a bekezdés jelenik meg, amikor rákattint a gombra (show-btn).
Megadhatja az időtartam paramétert is a megjelenítés animálásához és elrejtéséhez egy ideig.
Az időtartamok az elő-karakterláncok egyikével adhatók megdefivéges 'slow' o 'fast', vagy néhány ezredmásodperc alatt a nagyobb pontosság érdekében; a magasabb értékek lassabb animációkat jeleznek.
<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>A húr elődefiNita 'fast' 200 ezredmásodperces időtartamot jelez, míg a karakterlánc 'slow' 600 ezredmásodperc időtartamát jelzi.
Megadhatunk függvényt callback a metódus befejezése után kell végrehajtani show() vagy 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>A jQuery módszer toggle() elemek megjelenítése vagy elrejtése oly módon, hogy ha az elem kezdetben megjelenik, akkor az elrejtve lesz; fordítva, ha rejtett, akkor megjelenik (gyakorlatilag átkapcsolja a láthatóságát).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Hasonlóképpen megadhatja a paramétert duration a módszerhez toggle(), oly módon, hogy animálja az átmenetet a látható és a rejtett, hasonló módszerek között 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>Hasonlóképpen megadhat egy függvényt is callback a módszerhez 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()Használhat jQuery metódusokat fadeIn()e fadeOut() HTML-elemek megjelenítésére vagy elrejtésére, fokozatosan növelve vagy csökkentve átlátszatlanságukat, és elhalványulva.
<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>A többi jQuery-effektus-módszerhez hasonlóan a metódusokhoz opcionálisan megadhat időtartamot vagy sebességparamétert fadeIn()e fadeOut(), az elhalványulás időtartamának szabályozása érdekében. Az időtartamok az elő-karakterláncok egyikével adhatók megdefivéges 'slow' o 'fast', vagy ezredmásodpercek száma; a magasabb értékek lassabb animációkat jeleznek.
<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>a módszerek hatása fadeIn() / fadeOut() Ez hasonló show() / hide(), de a módszerektől eltérően show() / hide(), az előbbi csak a célelemek átlátszatlanságát animálja, és nem animálja azok méretét.
Megadhat egy függvényt is callback a metódusok befejezése után futni 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()A jQuery módszer fadeToggle() megjeleníti vagy elrejti a kiválasztott elemeket átlátszatlanságuk animálásával, így ha az elem kezdetben megjelenik, akkor elhalványul; ha el volt rejtve, akkor elhalványul (azaz átkapcsolja a fade hatást).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Megadhatja a metódus élettartam-paraméterét is fadeToggle() ami a módszereket illeti fadeIn() / fadeOut(), az elhalványulási animáció időtartamának vagy sebességének szabályozásához.
<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>A fadeToggle() metódus képes függvényt is megadni 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()A jQuery módszer fadeTo() a módszerhez hasonló fadeIn(), de ellentétben a módszerrel fadeIn(), a módszer fadeTo() lehetővé teszi az elemek összekeverését egy bizonyos átlátszatlansági szintig.
$(selector).fadeTo(speed, opacity, callback);A szükséges paraméter opacity Megadja a célelemek végső átlátszatlanságát, amely 0 és 1 közötti szám lehet. A paraméter duration o speed ehhez a metódushoz is szükség van, amely meghatározza az animáció elhalványulásának időtartamát.
<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()A jQuery módszer slideUp() e slideDown() HTML-elemek elrejtésére vagy megjelenítésére szolgálnak magasságuk fokozatos csökkentésével vagy növelésével (azaz felfelé vagy lefelé görgetve).
<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>A többi jQuery-effektus-módszerhez hasonlóan opcionálisan megadhatja a metódusok időtartamát vagy sebességét slideUp() e slideDown() a diaanimáció időtartamának szabályozására. Az időtartamok az elő-karakterláncok egyikével adhatók megdefivéges 'slow' o 'fast', vagy ezredmásodpercek száma; a magasabb értékek lassabb animációkat jeleznek.
<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>Megadhat egy visszahívási függvényt is, amelyet a metódus befejezése után kell végrehajtani 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()A jQuery módszer slideToggle() a kiválasztott elemek megjelenítése vagy elrejtése magasságuk animálásával, így ha az elem kezdetben megjelenik, akkor az felfelé gördül; ha el van rejtve, akkor lefelé görget, azaz vált a metódusok között slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Hasonlóképpen megadhatja a metódus élettartam-paraméterét slideToggle() hogyan 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>Hasonlóképpen megadhat egy visszahívási függvényt is a metódushoz 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()A jQuery módszer animate() egyéni animációk készítésére szolgál. A módszer animate() numerikus CSS-tulajdonságok animálására szolgál, mint pl width, height, margin, padding, opacity, top, left stb. de nem numerikus tulajdonságok mint color o background-color nem animálhatók a jQuery alapvető funkcióival.
A módszer alapszintaxisa animate() ez a következő:
$(selector).animate({ properties }, duration, callback);A módszer paraméterei animate() a következő jelentéssel bírnak:
'slow' o 'fast', vagy ezredmásodpercek száma; a magasabb értékek lassabb animációkat jeleznek.Az alábbiakban egy egyszerű példa látható a módszerre animate() amely gombnyomásra 300 képponttal animál egy képet az eredeti helyéről jobbra.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>A metódus használatával egy elem több tulajdonságát is animálhatja egyszerre animate(). Az összes tulajdonságot egyszerre animáltuk minden késedelem nélkül.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Egy elem több tulajdonságát is animálhatja egyenként, egy sorban a jQuery összefűzési függvényével.
A következő példa egy sorba állított vagy láncolt jQuery animációt mutat be, ahol minden animáció akkor indul el, amikor az elem előző animációja befejeződött. Az összefűzési függvényt egy későbbi cikkben fogjuk látni.
<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>Az is lehetséges definish relatív értékek az animált tulajdonságokhoz. Ha egy érték előtaggal van megadva += o -=, a célérték kiszámítása úgy történik, hogy a megadott számot hozzáadjuk vagy kivonjuk az ingatlan aktuális értékéből.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>A numerikus értékeken kívül minden tulajdonság elfogadhat karakterláncokat 'show', 'hide' e 'toggle'. Nagyon hasznos lesz olyan helyzetben, amikor az ingatlant az aktuális értékről a kezdeti értékre szeretné animálni, és fordítva.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()A jQuery módszer stop() A jQuery animációk vagy effektusok aktuális futtatásának leállítására szolgál a kiválasztott elemeken a befejezés előtt.
A módszer alapszintaxisa stop() A jQuery a következővel adható meg:
$(selector).stop(stopAll, goToEnd);A fenti szintaxis paramétereinek jelentése a következő:
false, ez azt jelenti, hogy csak az aktuális animáció áll le, a sorban lévő többi animáció később kerül végrehajtásra.false.Íme egy egyszerű példa a módszer bemutatására stop() valós akcióban, ahol elindíthatja és leállíthatja az animációt a gombra kattintva.
<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>Íme egy másik példa erre a módszerre, amikor ismét rákattint a gombraSlide Toggle” az animáció elindítása után, de még a befejezés előtt az animáció azonnal elindul a mentett kezdőponttal ellentétes irányba.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Az animált lebegtetési effektus létrehozásakor az egyik leggyakoribb probléma, amivel szembesülhet, hogy több animáció sorakozik fel, amikor gyorsan elhelyezi és eltávolítja az egérkurzort. Miért ebben a helyzetben, mouseenter gli mouseleave Az események gyorsan elindulnak az animáció befejezése előtt. A probléma elkerülése és a szép és sima lebegési hatás létrehozása érdekében hozzáadhat stop(true, true)a módszerlánchoz, így:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>A JavaScript utasításokat soronként hajtják végre. Mivel azonban a jQuery effektus befejeződése némi időt vesz igénybe, előfordulhat, hogy a következő sor kódja lefut, miközben az előző effektus még fut. Ennek elkerülése érdekében a jQuery minden effektus módszerhez biztosít egy visszahívási funkciót.
A visszahívási funkció egy olyan funkció, amely az effektus befejeződése után fut le. A visszahívási függvény argumentumként kerül átadásra az effekt metódusainak, és általában az utolsó metódus argumentumként jelennek meg. Például a jQuery effektus metódus alapvető szintaxisa slideToggle() visszahívási funkcióval, amely az alábbiak szerint adható meg:
$(selector).slideToggle(duration, callback);Tekintsük a következő példát, ahol az állításokat helyeztük el slideToggle()e alert()egyik a másik mellett. Ha kipróbálja ezt a kódot, a figyelmeztetés azonnal megjelenik a váltógombra kattintás után, anélkül, hogy megvárná a csúsztatási váltó effektus befejeződését.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>És itt van az előző példa módosított változata, ahová beszúrtuk az utasítást alert() a metódus visszahívási függvényében slideToggle(). Ha kipróbálja ezt a kódot, a figyelmeztető üzenet jelenik meg, amint a csúszkaváltó effektus befejeződött.
<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>Hasonlóképpen, te is tudsz defifejezze be a visszahívási függvényeket a többi jQuery effektus módszerhez, mint pl show(), hide(), fadeIn(), fadeOut(), animate()stb.
<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>Ha kipróbálja a fenti mintakódot, tételenként kétszer ugyanazt a figyelmeztető üzenetet kapja <h1> e <p>, miután az aktiválás gombra kattintott.
BlogInnovazione.it
A finom motoros készségek színezéssel történő fejlesztése felkészíti a gyerekeket olyan összetettebb készségekre, mint az írás. Kiszínezni…
A haditengerészeti szektor igazi világgazdasági hatalom, amely egy 150 milliárdos piac felé navigált...
Múlt hétfőn a Financial Times bejelentette, hogy megállapodást köt az OpenAI-val. Az FT engedélyezi világszínvonalú újságírását…
Emberek milliói fizetnek a streaming szolgáltatásokért, havi előfizetési díjat fizetve. Általános vélemény, hogy Ön…