Toggle () - a jquery objektumkészlet elemeinek megjelenítése vagy elrejtése

Az elemek azonnal megjeleníthetők vagy rejtve animáció nélkül, a kijelző CSS tulajdonságának megváltoztatásával. Ha az elem kezdetben megjelent, akkor rejtve lesz, különben megjelenik. A megjelenítési tulajdonságot szükség szerint megőrzi vagy helyreállítja. Ha az elemnek a megjelenítési tulajdonság értéke inline. majd a búvóhely elrejtése és megjelenése után a tulajdonság újból be lesz állítva.

Ha a következő érvek valamelyike ​​átkerül a módszerre (időtartam, objektum opciókkal vagy teljes függvény), a .toggle () módszerek animációval kerülnek végrehajtásra. A .toggle () metódus egyidejűleg élességet, magasságot és átlátszóságot él. Ha ezek a tulajdonságok az animáció befejezése után 0-ra érnek el, akkor a megjelenítési stílus tulajdonság értéke nincs, hogy meggyőződhessen arról, hogy az elem már nem befolyásolja az oldal elrendezését.

Az időtartam milliszekundumban van meghatározva. A magasabb értékek lassabb animációt jelentenek, nem gyorsabbak. Az alapértelmezett érték 400 milliszekundum. A "gyors" és "lassú" sorok megadhatók a 200 és 600 milliszekundumos időtartam meghatározására.

A jQuery 1.4.3-as verziótól kezdve a lenyíló funkció nevét tartalmazó kiegészítő karakterlánc használható. Easing funkció határozza meg az animáció haladási sebességét az animáció különböző pontjain. Az alapvető jQuery funkcionalitásban két ilyen funkció van: swing. alapértelmezés szerint, lineárisan és egységes animációváltással. További enyhítő funkciók elérhetők pluginek, elsősorban a jQuery UI csomag használatával.

A visszahívási funkció, ha van megadva, az animáció befejezése után egyszer hívásra kerül. Ez egy speciális animációsorozat létrehozására használható. Ez a függvény nem tartalmaz argumentumokat, de ez egy animált DOM elemre utal. Ha egyszerre több elemet animálunk, fontos megérteni, hogy a visszahívási funkció egyszerre kerül végrehajtásra mindegyik elemhez, és nem egyszer az egész animációhoz.

Minden elemet animálhatunk, például egy egyszerű képet:

Animáltunk a .toggle () segítségével egy másik elemre való kattintás után:

Az eredetileg megjelenített elem segítségével lassan elrejthetjük az első kattintás után:

1. kép - Az animáció ábrázolása () amikor a kép elrejtődik

A második kattintás ismét megjeleníti az elemet:

2. kép - Az animáció váltása () a kép megjelenítésekor

A módszer második változata Boole-paramétert vesz fel. Ha ez a paraméter igaz. akkor az elem megjelenik, ha a hamis elem rejtve van. Lényegében a kifejezés:

Kiegészítő megjegyzés:

• Minden jQuery hatás, beleértve a .toggle () -ot. globálisan letiltható a jQuery.fx.off = true beállítással. ami valójában az animáció időtartamát 0-ra állítja. Ezt részletesebben a jQuery.fx.off oldalon olvashatja le.