Ahogy az előző leckében láthattad, alapesetben az elemek egy szempillantás alatt eltűnnek vagy megjelennek a hide(), show() és toggle() metódusok hatására. Na de mi van, ha te azt szeretnéd, hogy lassabban (vagy esetleg még gyorsabban) játszódjon le az effektus?

Természetesen ennek is megvan a módja a jQueryben. A metódusoknak ugyanis van pár opcionálisan megadható paramétere, melyek egyike épp a sebesség (időtartam) meghatározására alkalmas.

Erről információt:

• itt találsz a hide() kapcsán;
• ezen az oldalon a show() vonatkozásában;
• valamint ebben a bejegyzésben a toggle()-t illetően.

Kérlek, olvasd el mindegyiknek a „Syntax” részét a „speed” szekció végéig.

Bizonyára észrevetted, hogy az időtartamot ugyanúgy adhatod meg mindhárom effektus esetében: a "slow" vagy "fast" értékkel, illetve milliszekundumokban. Utóbbira példát itt láthatsz a hide() és a show() használatánál, itt pedig a toggle() alkalmazásakor.

Ha már világos számodra, hogy miként határozhatod meg az effektusok sebességét, akkor kérlek, oldd meg az alábbi feladatot.

Feladat

Az alábbi penbe írj egy kis jQuery-programot, hogy ha a gombra kattintasz, akkor a bunny osztályú elemek 2000 milliszekundum alatt eltűnjenek.

A programod a következő kritériumoknak feleljen meg:

• Az event listener a gombra érkező kattintásokra figyeljen.
• A gombra történő klikkeléskor a bunny osztályú elemeket rejtsd el.
• Az elemek 2000 milliszekundum alatt tűnjenek el.
• Ne felejtsd ki a „document ready” eseményt.

Sok sikert!

Megoldás: Amikor elvégezted a feladatot, itt meg tudod nézni az általunk alkotott mintamegoldást. Hasonlítsd össze a kettőt, és ellenőrizd a saját verziódat. Ha minden rendben, akkor menj tovább a következő leckére.