Bevezetés a diához a jQuery alkalmazásban
A JQuery gyors és ez a sok JavaScript-könyvtár egyike. Egyszerűsíti a közös JavaScript feladatokat. Az összes olyan funkció mellett, amelyet a Jquery segítségével készíthetünk, saját egyedi effektusokat is létrehozhatunk, ezek között vannak a csúszó effektek is. A csúsztatás az elem elrejtésének és feltárásának a módja. A Jquery alkalmazásban elemet animálhatunk csúszó effektusokkal. Három módszerből áll, hogy megváltoztassa az elem láthatóságát. Csúsznak fel, csúsznak le és váltanak. A csúszó effektusok támogatják a visszahívási funkciókat és a sebességeket.
A csúsztatás módszerei a jQuery-ban
A Jquery 3 metódusa a következő: slideUp (), SlideDown () és slideToggle ():
1. slideUp ()
A SlideUp () módszer elrejti az animációval kiválasztott elemet. Nem ad vissza semmit, csak elrejti az elemet. A képeket animálhatjuk, mivel ez megváltoztatja a kép vagy az elem magasságát.
Szintaxis:
$(selector) .slideUp( (duration)(, easing) (, function()))
paraméterek:
- Időtartam: Az időtartam lehet karakterlánc vagy szám. Ez lehet idő milliszekundumban, vagy előre beállítható. Az időtartam alapértelmezett értéke 400 milliszekundum. Ez lehet lassú, gyors vagy normál, mint egy karakterlánc paraméter. Ez elősegíti számunkra, hogy a diák animációját igényeink alapján ellenőrizzük.
- Könnyítés: Az enyhítésnek húrnak kell lennie. Ezt az átmenetet használják. Az alapértelmezett érték a swing.
- Funkció: Az animáció befejezésekor egy opcionális visszahívási funkció kerül végrehajtásra.
1. példa: Ez egy példa a slideUp () módszerre. Ebben az esetben a paramétereket üresen adtuk át, azaz normálnak (elsőnek) a bekezdéshez, tehát az alapértelmezett érték 400 milliszekundum. Ezután átadtuk a „gyors” és a „lassú” karakterláncokat.
Kód:
Example of jQuery Slide-Up
p(
padding: 30px;
background: Red;
)
$(document).ready(function()(
$(".up-btn").click(function()(
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
));
));
Slide Up Paragraphs
Ez a bekezdés példa a csúsztatható bekezdésekre az alapértelmezett sebességgel.
Ez a bekezdés példa a gyorsan felcsúsztatható bekezdésekre.
Ez a bekezdés példa a csúsztatható bekezdésekre lassú sebességgel.
Kimenet:
A kimenet megjeleníti a bekezdéseket.
A felcsúsztatható bekezdések gombra kattintva a három bekezdés elrejtésre kerül.
2. példa : Ebben a példában a „másodperceket” adtuk át az időtartam-paraméterhez.
Kód:
Example of jQuery Slide-Up
p(
padding: 30px;
background: Red;
)
$(document).ready(function()(
$(".up-btn").click(function()(
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(20000);
));
));
Slide Up Paragraphs
Ez a bekezdés példa a nagyon gyorsan felcsúsztatható bekezdésekre.
Ez a bekezdés példa a nagyon lassú felcsúsztatható bekezdésekre.
Kimenet:
A kimenetben megfigyelhetjük, hogy a két bekezdést megjeleníti.
A felcsúsztatható bekezdések gombra kattintva megfigyelhetjük, hogy az első bekezdést azonnal elrejtettük, mivel ez 50 milliszekundumot vett igénybe.
Míg a második bekezdés lassan rejtőzik, mivel ez 20000 milliszekundumot igényelt. Láthatjuk, hogy a méret lassan csökken és rejtetté válik.
2. slideDown ()
A SlideDown () módszer megmutatja az animációval kiválasztott elemet.
Szintaxis:
$(selector) .slideDown( (duration)(, easing) (, function()))
paraméterek:
- Időtartam: Az időtartam lehet karakterlánc vagy szám. Ez lehet idő milliszekundumban, vagy előre beállítható. Az időtartam alapértelmezett értéke 400 milliszekundum. Lehet lassú, gyors vagy normál is. Ez elősegíti a dia animáció ellenőrzését.
- Könnyítés: Az enyhítésnek húrnak kell lennie. Ezt az átmenetet használják. Az alapértelmezett érték a swing.
- Funkció: Az animáció befejezésekor egy opcionális visszahívási funkció kerül végrehajtásra.
Példa: Ez egy példa a slideDown () módszerre.
Kód:
Example of jQuery Slide-Up and Slide-Down Effects
p(
padding: 30px;
background: Red;
)
$(document).ready(function()(
$(".up-btn").click(function()(
$("p.normal").slideUp();
));
$(".down-btn").click(function()(
$("p.normal").slideDown();
));
));
Slide Up Paragraph
Slide Down Paragraph
Ez a bekezdés az alapértelmezett sebességgel elhalványul.
Kimenet:
A program végrehajtása után.
A felfelé csúsztatható bekezdésre kattintva a bekezdés el van rejtve.
A lecsúsztatható bekezdésre kattintva megjelenik a bekezdés. Az alábbi képen láthatjuk.
3. slideToggle ()
A SlideToggle () metódus váltáshatást hoz létre. Váltás a kijelző és a rejtett között. Amikor rákattint, a kiválasztott elem csúszó animációját válthatja.
Szintaxis:
$(selector) .slideToggle( (duration)(, easing) (, function()))
paraméterek:
- Időtartam: Az időtartam lehet karakterlánc vagy szám. Ez lehet idő milliszekundumban, vagy előre beállítható. Az időtartam alapértelmezett értéke 400 milliszekundum. Lehet lassú, gyors vagy normál is. Ez elősegíti számunkra, hogy a diák animációját a követelményeink alapján irányítsuk.
- Könnyítés: Az enyhítésnek húrnak kell lennie. Ezt az átmenetet használják. Az alapértelmezett érték a swing.
- Funkció: Az animáció befejezésekor egy opcionális visszahívási funkció kerül végrehajtásra.
Példa: Ez a példa a slideToggle () módszerre.
Kód:
Example of jQuery Toggle Effect
p(
padding: 30px;
background: Red;
)
$(document).ready(function()(
$(".toggle-btn").click(function()(
$("p.normal").slideToggle();
));
));
Slide toggle Paragraph
Ez a bekezdés az alapértelmezett sebességgel elhalványul, és a gombra kattintva válthat.
Kimenet:
A program végrehajtása.
A gombra kattintva (a csúszó bekezdés váltása el van rejtve).
Ugyanazon a gombra kattintva (Csúsztassa a bekezdést) ez megjelenik.
Tehát ezek a Slide módszerei a jQuery-ben.
Ajánlott cikkek
Ez egy útmutató a Slide in jQuery alkalmazáshoz. Itt a Jquery 3 módszerét tárgyaljuk: a slideUp (), a SlideDown () és a slideToggle () részletesen, megfelelő kódokkal és kimenetekkel. Megnézheti más kapcsolódó cikkeket is, ha többet szeretne megtudni -
- jQuery querySelector
- JavaFX csúszka
- jQuery Effects
- JavaFX táblázatok
- A 8 legfontosabb jQuery választógép kód implementációval
- A HBox 15 legfontosabb módszere a JavaFX-ben