Në këtë artikull do të shohim se si të përdorim metoda të ndryshme JQuery për gjenerimin e animacioneve.
hide() Dhe show()Metoda hide() thjesht vendos stilin në linjë display: none për artikujt e përzgjedhur. Anasjelltas, metoda show() rikthen vetitë e ekranit.
Le të shohim një shembull:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Në rastin e parë, paragrafi fshihet kur klikoni në butonin (hide-btn), në rastin e dytë paragrafi shfaqet kur klikoni në butonin (show-btn).
Ju gjithashtu mund të specifikoni parametrin e kohëzgjatjes, për të animuar shfaqjen dhe për të fshehur efektin për një periudhë kohore.
Kohëzgjatjet mund të specifikohen duke përdorur një nga vargjet paraprakedefiNite 'slow' o 'fast', ose në një numër milisekondash, për saktësi më të madhe; vlerat më të larta tregojnë animacione më të ngadalta.
<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>Vargu paradefinita 'fast' tregon një kohëzgjatje prej 200 milisekondash, ndërsa vargu 'slow' tregon kohëzgjatjen prej 600 milisekondash.
Mund të specifikojmë një funksion të callback të ekzekutohet pas përfundimit të metodës show() ose të 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() shfaqni ose fshihni artikujt në atë mënyrë që nëse artikulli shfaqet fillimisht, ai do të fshihet; anasjelltas, nëse fshihet, ai do të shfaqet (praktikisht ndryshon dukshmërinë e tij).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Në mënyrë të ngjashme, mund të specifikoni parametrin duration për metodën toggle(), në mënyrë të tillë që të animojë kalimin midis metodave të dukshme dhe të fshehta 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>Në mënyrë të ngjashme, ju gjithashtu mund të specifikoni një funksion të callback për metodën 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()Ju mund të përdorni metoda jQuery fadeIn()e fadeOut() për të shfaqur ose fshehur elementët HTML, duke rritur ose ulur gradualisht opacitetin e tyre dhe duke krijuar një efekt zbehje.
<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>Ashtu si metodat e tjera të efekteve jQuery, ju mund të specifikoni opsionalisht kohëzgjatjen ose parametrin e shpejtësisë për metodat fadeIn()e fadeOut(), për të kontrolluar kohëzgjatjen e zbehjes. Kohëzgjatjet mund të specifikohen duke përdorur një nga vargjet paraprakedefiNite 'slow' o 'fast', ose në një numër milisekondash; vlerat më të larta tregojnë animacione më të ngadalta.
<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>efekti i metodave fadeIn() / fadeOut() Është e ngjashme me show() / hide(), por ndryshe nga metodat show() / hide(), të parët vetëm animojnë opacitetin e elementeve të synuar dhe nuk animojnë madhësinë e tyre.
Gjithashtu mund të specifikoni një funksion të callback për të ekzekutuar pas përfundimit të metodave 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() shfaq ose fsheh elementet e zgjedhur duke animuar opacitetin e tyre në mënyrë që nëse elementi shfaqet fillimisht, ai do të zbehet; nëse ishte e fshehur, do të zbehet (d.m.th. ndërroni efektin e zbehjes).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Ju gjithashtu mund të specifikoni parametrin e jetëgjatësisë për metodën fadeToggle() sa i përket metodave fadeIn() / fadeOut(), për të kontrolluar kohëzgjatjen ose shpejtësinë e animacionit të zbehjes.
<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() ka gjithashtu aftësinë për të specifikuar një funksion 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() është e ngjashme me metodën fadeIn(), por ndryshe nga metoda fadeIn(), metoda fadeTo() ju lejon të përzieni elementë deri në një nivel të caktuar të errët.
$(selector).fadeTo(speed, opacity, callback);Parametri i kërkuar opacity specifikon opacitetin përfundimtar të elementeve të synuar që mund të jetë një numër midis 0 dhe 1. Parametri duration o speed kërkohet edhe për këtë metodë e cila specifikon kohëzgjatjen e fade-it të animacionit.
<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() përdoren për të fshehur ose shfaqur elementë HTML duke ulur ose rritur gradualisht lartësinë e tyre (d.m.th. duke i lëvizur lart ose poshtë).
<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>Ashtu si metodat e tjera të efekteve jQuery, ju mund të specifikoni opsionalisht kohëzgjatjen ose parametrin e shpejtësisë për metodat slideUp() e slideDown() për të kontrolluar kohëzgjatjen e animacionit të rrëshqitjes. Kohëzgjatjet mund të specifikohen duke përdorur një nga vargjet paraprakedefiNite 'slow' o 'fast', ose në një numër milisekondash; vlerat më të larta tregojnë animacione më të ngadalta.
<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>Ju gjithashtu mund të specifikoni një funksion të kthimit të thirrjes për të ekzekutuar pas përfundimit të metodës 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() shfaqni ose fshihni elementët e përzgjedhur duke animuar lartësinë e tyre në mënyrë që nëse elementi shfaqet fillimisht, ai do të lëvizet lart; nëse fshihet, do të lëvizet poshtë, d.m.th. do të ndërrohet ndërmjet metodave slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Në mënyrë të ngjashme, mund të specifikoni parametrin e jetëgjatësisë për metodën slideToggle() si 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>Në mënyrë të ngjashme, mund të specifikoni gjithashtu një funksion të kthimit të thirrjes për metodën 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() përdoret për të krijuar animacione të personalizuara. Metoda animate() përdoret për të animuar vetitë numerike CSS, si p.sh width, height, margin, padding, opacity, top, left etj. por veti jo numerike si color o background-color ato nuk mund të animohen duke përdorur funksionalitetin bazë të jQuery.
Sintaksa bazë e metodës animate() është si vijon:
$(selector).animate({ properties }, duration, callback);Parametrat e metodës animate() kanë këto kuptime:
'slow' o 'fast', ose në një numër milisekondash; vlerat më të larta tregojnë animacione më të ngadalta.Më poshtë është një shembull i thjeshtë i metodës animate() i cili animon një imazh nga pozicioni i tij origjinal në të djathtë me 300 piksele me klikimin e butonit.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Ju gjithashtu mund të animoni vetitë e shumta të një elementi së bashku në të njëjtën kohë duke përdorur metodën animate(). Të gjitha pronat u animuan në të njëjtën kohë pa asnjë vonesë.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Ju gjithashtu mund të animoni vetitë e shumta të një elementi një nga një individualisht, në një radhë duke përdorur funksionin e lidhjes së jQuery.
Shembulli i mëposhtëm tregon një animacion jQuery me radhë ose zinxhir, ku çdo animacion do të fillojë pasi të ketë përfunduar animacioni i mëparshëm në element. Ne do të shohim funksionin e lidhjes në një artikull të ardhshëm.
<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>Alsoshtë gjithashtu e mundur defipërfundoni vlerat relative për vetitë e animuara. Nëse një vlerë specifikohet me një parashtesë += o -=, vlera e synuar llogaritet duke shtuar ose zbritur numrin e specifikuar nga vlera aktuale e pronës.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Përveç vlerave numerike, çdo veti mund të pranojë vargje 'show', 'hide' e 'toggle'. Do të jetë shumë e dobishme në një situatë ku thjesht dëshironi të animoni pronën nga vlera aktuale në vlerën fillestare dhe anasjelltas.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Metoda jQuery stop() përdoret për të ndaluar ekzekutimin e animacioneve ose efekteve të jQuery në elementët e zgjedhur përpara përfundimit.
Sintaksa bazë e metodës stop() jQuery mund të jepet me:
$(selector).stop(stopAll, goToEnd);Parametrat në sintaksën e mësipërme kanë kuptimet e mëposhtme:
false, kjo do të thotë se vetëm animacioni aktual do të ndalet, pjesa tjetër e animacioneve në radhë do të ekzekutohen më vonë.false.Këtu është një shembull i thjeshtë që demonstron metodën stop() në veprim real ku mund të filloni dhe ndaloni animacionin me klikimin e butonit.
<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>Këtu është një shembull tjetër i kësaj metode ku nëse klikoni përsëri butoninSlide Toggle” pas fillimit të animacionit, por para se të përfundojë, animacioni do të fillojë menjëherë në drejtim të kundërt nga pika fillestare e ruajtur.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Gjatë krijimit të efektit të animuar të pezullimit, një nga problemet më të zakonshme që mund të hasni është animacione të shumta në radhë, kur vendosni dhe hiqni shpejt kursorin e miut. Pse në këtë situatë, mouseenter gli mouseleave Ngjarjet shfaqen shpejt përpara se të përfundojë animacioni. Për të shmangur këtë problem dhe për të krijuar një efekt të këndshëm dhe të qetë, mund të shtoni stop(true, true)në zinxhirin e metodës, si kjo:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Deklaratat JavaScript ekzekutohen rresht pas rreshti. Megjithatë, duke qenë se efekti jQuery kërkon pak kohë për të përfunduar, kodi i rreshtit tjetër mund të ekzekutohet ndërkohë që efekti i mëparshëm është ende në punë. Për të parandaluar që kjo të ndodhë, jQuery ofron një funksion të kthimit të thirrjes për secilën metodë efekti.
Funksioni i kthimit të thirrjes është një funksion që funksionon pasi të përfundojë efekti. Funksioni i kthimit të thirrjes kalohet si një argument për metodat e efektit, dhe ato zakonisht shfaqen si argumenti i fundit i metodës. Për shembull, sintaksa bazë e metodës së efektit jQuery slideToggle() me një funksion të kthimit të thirrjes që mund të specifikohet si më poshtë:
$(selector).slideToggle(duration, callback);Merrni parasysh shembullin e mëposhtëm ku kemi vendosur deklaratat slideToggle()e alert()njëra pranë tjetrës. Nëse provoni këtë kod, sinjalizimi do të shfaqet menjëherë pasi të klikoni butonin e ndërrimit pa pritur që të përfundojë efekti i ndryshimit të rrëshqitjes.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Dhe këtu është versioni i modifikuar i shembullit të mëparshëm ku kemi futur deklaratën alert() brenda një funksioni të kthimit të thirrjes për metodën slideToggle(). Nëse provoni këtë kod, mesazhi paralajmërues do të shfaqet sapo të përfundojë efekti i ndryshimit të rrëshqitjes.
<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>Po kështu, ju mundeni defipërfundoni funksionet e kthimit të thirrjes për metodat e tjera të efektit jQuery, si p.sh show(), hide(), fadeIn(), fadeOut(), animate(), etj.
<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>Nëse provoni shembullin e kodit të mësipërm, do të merrni të njëjtin mesazh paralajmërues dy herë për çdo artikull <h1> e <p>, pasi klikoni në butonin aktivizo.
BlogInnovazione.it
Mirëmbajtja parashikuese po revolucionon sektorin e naftës dhe gazit, me një qasje inovative dhe proaktive për menaxhimin e impiantit.…
CMA e Mbretërisë së Bashkuar ka lëshuar një paralajmërim për sjelljen e Big Tech në tregun e inteligjencës artificiale. Aty…
Dekreti "Case Green", i formuluar nga Bashkimi Evropian për të rritur efiçencën energjetike të ndërtesave, ka përfunduar procesin e tij legjislativ me…
Prezantohet raporti vjetor i Casaleggio Associati mbi tregtinë elektronike në Itali. Raporti i titulluar “AI-Commerce: kufijtë e tregtisë elektronike me inteligjencën artificiale”.…