În acest articol vom vedea cum să folosim diferite metode JQuery pentru generarea de animații.
hide() Și show()Metoda hide() setează pur și simplu stilul în linie display: none pentru articolele selectate. În schimb, metoda show() restabilește proprietățile de afișare.
Să vedem un exemplu:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>În primul caz, paragraful este ascuns când faceți clic pe butonul (hide-btn), în al doilea caz paragraful este afișat când dați clic pe butonul (show-btn).
De asemenea, puteți specifica parametrul de durată, pentru a anima spectacolul și a ascunde efectul pentru o perioadă de timp.
Duratele pot fi specificate folosind unul dintre șirurile prealabiledefiNite 'slow' o 'fast', sau într-un număr de milisecunde, pentru o precizie mai mare; valorile mai mari indică animații mai lente.
<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>Coarda predefinita 'fast' indică o durată de 200 de milisecunde, în timp ce șirul 'slow' indică durata de 600 milisecunde.
Putem specifica o funcție de callback care urmează să fie executat după finalizarea metodei show() sau dell ' 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() afișează sau ascunde elementele în așa fel încât, dacă articolul este afișat inițial, acesta va fi ascuns; invers, dacă este ascuns, va fi afișat (practic își comută vizibilitatea).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>În mod similar, puteți specifica parametrul duration pentru metoda toggle(), în așa fel încât să anime trecerea între vizibil și ascuns, ca metode 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 mod similar, puteți specifica și o funcție de callback pentru metoda 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()Puteți folosi metode jQuery fadeIn()e fadeOut() pentru a afișa sau a ascunde elemente HTML, crescând sau scăzând treptat opacitatea acestora și creând un efect de estompare.
<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>Ca și alte metode de efecte jQuery, puteți specifica opțional durata sau parametrul de viteză pentru metode fadeIn()e fadeOut(), pentru a controla durata decolorării. Duratele pot fi specificate folosind unul dintre șirurile prealabiledefiNite 'slow' o 'fast', sau într-un număr de milisecunde; valorile mai mari indică animații mai lente.
<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>efectul metodelor fadeIn() / fadeOut() este similar cu show() / hide(), dar spre deosebire de metode show() / hide(), primii doar animă opacitatea elementelor țintă și nu animă dimensiunea acestora.
De asemenea, puteți specifica o funcție de callback să ruleze după finalizarea metodelor 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() afișează sau ascunde elementele selectate prin animarea opacității acestora astfel încât, dacă elementul este afișat inițial, acesta va fi estompat; dacă a fost ascuns, se va estompa (adică comutați efectul de estompare).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>De asemenea, puteți specifica parametrul de viață pentru metodă fadeToggle() cat despre metode fadeIn() / fadeOut(), pentru a controla durata sau viteza animației de estompare.
<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() are și capacitatea de a specifica o funcție 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() este similar cu metoda fadeIn(), dar spre deosebire de metodă fadeIn(), metoda fadeTo() vă permite să amestecați elemente până la un anumit nivel de opacitate.
$(selector).fadeTo(speed, opacity, callback);Parametrul necesar opacity specifică opacitatea finală a elementelor țintă care poate fi un număr între 0 și 1. Parametrul duration o speed este necesar și pentru această metodă care specifică durata decolorării animației.
<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() sunt folosite pentru a ascunde sau afișa elemente HTML prin scăderea sau creșterea treptată a înălțimii acestora (adică, derulându-le în sus sau în jos).
<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>Ca și alte metode de efecte jQuery, puteți specifica opțional durata sau parametrul de viteză pentru metode slideUp() e slideDown() pentru a controla durata animației diapozitivelor. Duratele pot fi specificate folosind unul dintre șirurile prealabiledefiNite 'slow' o 'fast', sau într-un număr de milisecunde; valorile mai mari indică animații mai lente.
<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>De asemenea, puteți specifica o funcție de apel invers care să fie executată după finalizarea metodei 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() afișați sau ascundeți elementele selectate prin animarea înălțimii acestora, astfel încât, dacă elementul este afișat inițial, acesta va fi derulat în sus; dacă este ascuns, va fi derulat în jos, adică comută între metode slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>În mod similar, puteți specifica parametrul de viață pentru metodă slideToggle() cum 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 mod similar, puteți specifica și o funcție de apel invers pentru metodă 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() este folosit pentru a crea animații personalizate. Metoda animate() este folosit pentru a anima proprietăți CSS numerice, cum ar fi width, height, margin, padding, opacity, top, left etc. dar proprietăţi nenumerice ca color o background-color nu pot fi animate folosind funcționalitatea de bază jQuery.
Sintaxa de bază a metodei animate() este următorul:
$(selector).animate({ properties }, duration, callback);Parametrii metodei animate() au urmatoarele semnificatii:
'slow' o 'fast', sau într-un număr de milisecunde; valorile mai mari indică animații mai lente.Mai jos este un exemplu simplu al metodei animate() care animă o imagine din poziția inițială la dreapta cu 300 de pixeli la clic pe buton.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>De asemenea, puteți anima simultan mai multe proprietăți ale unui element folosind metoda animate(). Toate proprietățile au fost animate în același timp fără nicio întârziere.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>De asemenea, puteți anima mai multe proprietăți ale unui element una câte una individual, într-o coadă folosind funcția de concatenare a jQuery.
Următorul exemplu arată o animație jQuery în coadă sau în lanț, în care fiecare animație va începe odată ce animația anterioară a elementului a fost finalizată. Vom vedea funcția de concatenare într-un articol viitor.
<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>Este, de asemenea, posibil defivalori relative finale pentru proprietățile animate. Dacă o valoare este specificată cu un prefix += o -=, valoarea țintă este calculată prin adăugarea sau scăderea numărului specificat din valoarea curentă a proprietății.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Pe lângă valorile numerice, fiecare proprietate poate accepta șiruri 'show', 'hide' e 'toggle'. Va fi foarte util într-o situație în care doriți doar să animați proprietatea de la valoarea sa actuală la valoarea sa inițială și invers.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Metoda jQuery stop() este folosit pentru a opri rularea curentă a animațiilor sau efectelor jQuery pe elementele selectate înainte de finalizare.
Sintaxa de bază a metodei stop() jQuery poate fi dat cu:
$(selector).stop(stopAll, goToEnd);Parametrii din sintaxa de mai sus au următoarele semnificații:
false, asta înseamnă că doar animația curentă va fi oprită, restul animațiilor din coadă vor fi executate ulterior.false.Iată un exemplu simplu care demonstrează metoda stop() în acțiune reală, unde puteți începe și opri animația la clic pe buton.
<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>Iată un alt exemplu al acestei metode în care dacă dați clic din nou pe butonSlide Toggle” după începerea animației, dar înainte de a se finaliza, animația va începe imediat în direcția opusă punctului de pornire salvat.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Când creați efectul de hover animat, una dintre cele mai frecvente probleme pe care le puteți întâlni este animațiile multiple puse în coadă, atunci când plasați și eliminați rapid cursorul mouse-ului. De ce, în această situație, mouseenter Gli mouseleave evenimentele sunt declanșate rapid înainte de finalizarea animației. Pentru a evita această problemă și pentru a crea un efect de hover plăcut și neted, puteți adăuga stop(true, true)la lanțul de metode, astfel:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Instrucțiunile JavaScript sunt executate linie cu linie. Cu toate acestea, deoarece efectul jQuery durează ceva timp pentru a se termina, codul liniei următoare ar putea rula în timp ce efectul anterior este încă în rulare. Pentru a preveni acest lucru, jQuery oferă o funcție de apel invers pentru fiecare metodă de efect.
O funcție de apel invers este o funcție care rulează odată ce efectul este complet. Funcția de apel invers este transmisă ca argument metodelor efectului și de obicei apar ca ultimul argument al metodei. De exemplu, sintaxa de bază a metodei efect jQuery slideToggle() cu o funcție de apel invers care poate fi specificată după cum urmează:
$(selector).slideToggle(duration, callback);Luați în considerare următorul exemplu în care am plasat enunțurile slideToggle()e alert()unul lângă altul. Dacă încercați acest cod, alerta va apărea imediat după ce faceți clic pe butonul de comutare, fără a aștepta finalizarea efectului de comutare al glisării.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Și aici este versiunea modificată a exemplului anterior în care am inserat declarația alert() în interiorul unei funcții de apel invers pentru metodă slideToggle(). Dacă încercați acest cod, mesajul de avertizare va apărea odată ce efectul de comutare al glisării este finalizat.
<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>La fel, poți defiterminați funcțiile de apel invers pentru celelalte metode de efect jQuery, cum ar fi show(), hide(), fadeIn(), fadeOut(), animate()etc.
<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>Dacă încercați exemplul de cod de mai sus, veți primi același mesaj de avertizare de două ori o dată pe articol <h1> e <p>, după ce faceți clic pe butonul de activare.
BlogInnovazione.it
CMA din Marea Britanie a emis un avertisment cu privire la comportamentul Big Tech pe piața inteligenței artificiale. Acolo…
Decretul „Case verzi”, formulat de Uniunea Europeană pentru creșterea eficienței energetice a clădirilor, și-a încheiat procesul legislativ cu...
Raportul anual al lui Casaleggio Associati privind comerțul electronic în Italia a fost prezentat. Raport intitulat „AI-Commerce: frontierele comerțului electronic cu inteligență artificială”.…
Rezultat al inovației tehnologice constante și al angajamentului față de mediu și bunăstarea oamenilor. Bandalux prezintă Airpure®, un cort...