Članci

JQuery, kako možemo implementirati dinamičke efekte sa JQuery-jem

Pomoću JQueryja možete kreirati dinamičke efekte, animacije i blijedi djelovanjem na elemente HTML stranice.

U ovom članku ćemo vidjeti kako koristiti različite JQuery metode za generiranje animacija.

Sakrij i prikaži HTML element

metode hide() I show()

Metoda hide() jednostavno postavlja stil u liniji display: none za odabrane stavke. Suprotno tome, metoda show() vraća svojstva prikaza. 

Pogledajmo primjer:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

U prvom slučaju pasus je sakriven kada kliknete na dugme (hide-btn), u drugom slučaju pasus se prikazuje kada kliknete na dugme (show-btn).

Također možete odrediti parametar trajanja, da animirate emisiju i sakrijete efekat na određeni vremenski period.

Trajanje se može specificirati pomoću jednog od pred nizovadefinite 'slow''fast', ili u nekoliko milisekundi, za veću preciznost; veće vrijednosti označavaju sporije animacije.

<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>

Žica predefinita 'fast' označava trajanje od 200 milisekundi, dok string 'slow' označava trajanje od 600 milisekundi.

Možemo specificirati funkciju od callback koji će se izvršiti nakon završetka metode show() ili od 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 prebacivanja

Metoda jQuery toggle() prikaži ili sakrij stavke na takav način da će, ako je stavka inicijalno prikazana, biti skrivena; obrnuto, ako je skriveno, biće prikazano (praktički menja svoju vidljivost).

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

Slično, možete odrediti parametar duration za metodu toggle(), na takav način da animira prijelaz između vidljivih i skrivenih, sličnih metoda 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>

Slično, možete odrediti i funkciju od callback za 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>

jQuery efekti bledenja

metode fadeIn()fadeOut()

Možete koristiti jQuery metode fadeIn()fadeOut() da prikažete ili sakrijete HTML elemente, postepeno povećavajući ili smanjujući njihovu neprozirnost i stvarajući efekat blijeđenja.

<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>

Kao i druge metode jQuery efekata, opciono možete odrediti parametar trajanja ili brzine za metode fadeIn()fadeOut(), kako bi se kontrolisalo trajanje fade. Trajanje se može specificirati pomoću jednog od pred nizovadefinite 'slow''fast', ili u određenom broju milisekundi; veće vrijednosti označavaju sporije animacije.

<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>

efekat metoda fadeIn()fadeOut() Slično je sa show()hide(), ali za razliku od metoda show()hide(), prvi samo animiraju neprozirnost ciljnih elemenata i ne animiraju njihovu veličinu.

Također možete odrediti funkciju od callback da se pokrene nakon što se metode završe 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>
metodo fadeToggle()

Metoda jQuery fadeToggle() prikazuje ili sakriva odabrane elemente animirajući njihovu neprozirnost tako da će, ako je element inicijalno prikazan, izblijediti; ako je bio skriven, izblijedit će (tj. uključiti efekat bledenja).

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

Također možete odrediti parametar životnog vijeka za metodu fadeToggle() što se tiče metoda fadeIn()fadeOut(), za kontrolu trajanja ili brzine animacije zatamnjenja.

<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>

FadeToggle() metoda također ima mogućnost specificiranja funkcije 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>
metodo fadeTo()

Metoda jQuery fadeTo() slična je metodi fadeIn(), ali za razliku od metode fadeIn(), metoda fadeTo() omogućava vam mešanje elemenata do određenog nivoa neprozirnosti.

$(selector).fadeTo(speed, opacity, callback);

Traženi parametar opacity specificira konačnu neprozirnost ciljnih elemenata koji može biti broj između 0 i 1. Parametar duration o speed takođe je potreban za ovu metodu koja specificira trajanje bledenja animacije.

<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>

Efekti skrolovanja

metode slideUp()slideDown()

Metoda jQuery slideUp()slideDown() koriste se za sakrivanje ili prikazivanje HTML elemenata postupnim smanjenjem ili povećanjem njihove visine (tj. pomicanjem gore ili dolje).

<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>

Kao i druge metode jQuery efekata, opciono možete odrediti parametar trajanja ili brzine za metode slideUp()slideDown() za kontrolu trajanja animacije slajda. Trajanje se može specificirati pomoću jednog od pred nizovadefinite 'slow''fast', ili u određenom broju milisekundi; veće vrijednosti označavaju sporije animacije.

<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>

Također možete odrediti funkciju povratnog poziva koja će se izvršiti nakon završetka metode slideUp()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>
metodo slideToggle()

Metoda jQuery slideToggle() prikažite ili sakrijte odabrane elemente animiranjem njihove visine tako da će se, ako je element inicijalno prikazan, pomicati prema gore; ako je skriveno, pomeraće se prema dole, tj. prebacuje se između metoda slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

Slično, možete odrediti parametar životnog vijeka za metodu slideToggle() doći slideUp()slideDown().

Inovacijski bilten
Ne propustite najvažnije vijesti o inovacijama. Prijavite se da ih primate putem e-pošte.
<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>

Slično, možete odrediti i funkciju povratnog poziva za 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>

Efekti animacije

metodo animate()

Metoda jQuery animate() koristi se za kreiranje prilagođenih animacija. Metoda animate() se koristi za animiranje numeričkih CSS svojstava, kao što su width, height, margin, padding, opacity, top, left itd. ali nenumerička svojstva poput colorbackground-color ne mogu se animirati koristeći osnovnu jQuery funkcionalnost.

Osnovna sintaksa metode animate() to je sljedeće:

$(selector).animate({ properties }, duration, callback);

Parametri metode animate() imaju sljedeća značenja:

  • Traženi parametar svojstava defizavršiti CSS svojstva za animiranje.
  • Opcijski parametar trajanja određuje koliko dugo će se animacija izvoditi. Trajanje se može specificirati pomoću jednog od pred nizovadefinite 'slow''fast', ili u određenom broju milisekundi; veće vrijednosti označavaju sporije animacije.
  • Opcijski parametar povratnog poziva je funkcija koju treba pozvati nakon što se animacija završi.

Ispod je jednostavan primjer metode animate() koji animira sliku iz originalne pozicije udesno za 300 piksela pritiskom na dugme.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

Također možete istovremeno animirati više svojstava elementa koristeći metodu animate(). Sve nekretnine su animirane u isto vrijeme bez ikakvog odlaganja.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

Također možete animirati višestruka svojstva elementa jedno po jedno pojedinačno, u redu pomoću jQuery funkcije spajanja.

Sljedeći primjer prikazuje jQuery animaciju u redu čekanja ili ulančanu, gdje će svaka animacija početi nakon što se prethodna animacija na elementu završi. U narednom članku ćemo vidjeti funkciju konkatenacije.

<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>

Takođe je moguće definiže relativne vrijednosti za animirana svojstva. Ako je vrijednost specificirana s prefiksom += o -=, ciljna vrijednost se izračunava dodavanjem ili oduzimanjem navedenog broja od trenutne vrijednosti svojstva.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

Pored numeričkih vrijednosti, svako svojstvo može prihvatiti nizove 'show''hide''toggle'. To će biti vrlo korisno u situaciji kada samo želite da animirate svojstvo sa njegove trenutne vrijednosti na početnu vrijednost i obrnuto.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>
metodo stop()

Metoda jQuery stop() koristi se za zaustavljanje trenutno pokretanih jQuery animacija ili efekata na odabrane stavke prije završetka.

Osnovna sintaksa metode stop() jQuery se može dati sa:

$(selector).stop(stopAll, goToEnd);

Parametri u gornjoj sintaksi imaju sljedeća značenja:

  • Il izborni parametar boolean stopAll, određuje hoće li se ukloniti animacija u redu čekanja ili ne. Predefinite is false, to znači da će samo trenutna animacija biti zaustavljena, a ostale animacije u redu će se izvršiti kasnije.
  • Logički parametar goToEnd opciono određuje da li da se trenutna animacija dovrši odmah. Predefinite is false.

Evo jednostavnog primjera koji demonstrira metodu stop() u stvarnoj akciji gdje možete pokrenuti i zaustaviti animaciju pritiskom na dugme.

<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>

Evo još jednog primjera ove metode gdje ako ponovo kliknete na dugmeSlide Toggle” nakon pokretanja animacije, ali prije nego što se završi, animacija će odmah početi u smjeru suprotnom od spremljene početne točke.

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

Prilikom kreiranja efekta animiranog lebdenja, jedan od najčešćih problema na koji možete naići je višestruke animacije u redu, kada brzo postavite i uklonite kursor miša. Zašto, u ovoj situaciji, mouseenter gli mouseleave događaji se brzo aktiviraju prije nego što se animacija završi. Da biste izbjegli ovaj problem i stvorili lijep i gladak efekat lebdenja, možete dodati stop(true, true)na lanac metoda, ovako:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

povratni

JavaScript izrazi se izvršavaju red po red. Međutim, pošto jQuery efektu treba neko vrijeme da se završi, kod sljedećeg reda se može pokrenuti dok prethodni efekat još uvijek radi. Da bi se to spriječilo, jQuery pruža funkciju povratnog poziva za svaki metod efekta.

Funkcija povratnog poziva je funkcija koja se pokreće nakon završetka efekta. Funkcija povratnog poziva se prosljeđuje kao argument metodama efekta, a one se obično pojavljuju kao posljednji argument metode. Na primjer, osnovna sintaksa metode jQuery efekta slideToggle() sa funkcijom povratnog poziva koja se može specificirati na sljedeći način:

$(selector).slideToggle(duration, callback);

Razmotrimo sljedeći primjer gdje smo smjestili iskaze slideToggle()alert()jedan pored drugog. Ako isprobate ovaj kod, upozorenje će se pojaviti odmah nakon što kliknete na dugme za prebacivanje bez čekanja da se završi efekat prebacivanja slajda.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

A ovdje je izmijenjena verzija prethodnog primjera gdje smo ubacili izjavu alert() unutar funkcije povratnog poziva za metodu slideToggle(). Ako isprobate ovaj kod, poruka upozorenja će se pojaviti kada se završi efekat prebacivanja slajda.

<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>

Isto tako, možete defizavrši funkcije povratnog poziva za druge metode jQuery efekta, kao što je show(), hide(), fadeIn()fadeOut()animate()itd.

<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>

Ako isprobate gornji primjer koda, dobit ćete istu poruku upozorenja dvaput po artiklu <h1><p>, nakon što kliknete na dugme za aktiviranje.

BlogInnovazione.it

Inovacijski bilten
Ne propustite najvažnije vijesti o inovacijama. Prijavite se da ih primate putem e-pošte.
Tagovi: jQuery

Nedavni članak

Smart Lock Market: objavljen izvještaj o istraživanju tržišta

Termin Smart Lock Market odnosi se na industriju i ekosistem koji okružuje proizvodnju, distribuciju i upotrebu…

27 Marzo 2024

Šta su obrasci dizajna: zašto ih koristiti, klasifikacija, prednosti i nedostaci

U softverskom inženjerstvu, obrasci dizajna su optimalna rješenja za probleme koji se obično javljaju u dizajnu softvera. Ja sam kao…

26 Marzo 2024

Tehnološka evolucija industrijskog označavanja

Industrijsko označavanje je širok pojam koji obuhvata nekoliko tehnika koje se koriste za stvaranje trajnih tragova na površini…

25 Marzo 2024

Primjeri Excel makroa napisanih pomoću VBA

Sljedeći jednostavni primjeri Excel makroa napisani su korištenjem VBA procijenjenog vremena čitanja: 3 minute Primjer…

25 Marzo 2024