Hogyan készítsünk tartalom érhető forgás jquery

Forgatás a tartalom, valamint a parallaxis hatást, gyakran megtalálható a weboldalakon. Lehet, hogy észrevette, hogy a forgás használják hírek, tweet, Facebook bejegyzéseket, és így tovább. Jellemzően létrehozásakor egy modult használt show () és hide () vagy más hasonló módszerrel, mint például fadeIn () / fadeOut () és slideUp () / slideDown (). A probléma velük, hogy az animáció után (ha van) az alábbi módszerek megváltoztatni az értéket a kiválasztott megjelenítési elemet sem, és vissza az eredeti érték, ill. Ez a viselkedés vezet probléma elérhetőségét.

Ebben a cikkben bemutatjuk a problémát, és a különböző módszerek a jQuery, amely lehetővé teszi, hogy elérjék ugyanazt a hatást, de anélkül, hogy a hozzáférhetőség problémáival.

Mutassa be a kódot

Ahhoz, hogy megadja a lehetőséget, hogy jobban megértsük a helyzetet, úgy a következő kódot:

Ahhoz, hogy a rotációs blokk tartalmát írhatsz kódot, mint ez:

Mindent egybevetve, az lesz a következő bemutatók:

Elérhető tartalom forgatás

A probléma megoldása érdekében a hozzáférhetőség, miközben ugyanazt a hatást, meg kell használni egy másik módszer a jQuery és a CSS támogatással, például vizuálisan-rejtettek. megtakarítás osztály kódot az alábbi ábrán látható:

Hozzáadása ebbe az osztályba elrejti minden elem kijelző elem telepítése nélkül sem ingatlan értékének.

Most, használata helyett a módszerek elrejtése () / Show (). Megjelenítése / elrejtése az elem, akkor elegendő a hozzáadni vagy eltávolítani egy osztály a vizuálisan rejtettek. Amellett, hogy újra létre tisztességes animációk fogjuk használni fadeTo () metódust. Az utóbbi lehetővé teszi, hogy az átláthatósági a kívánt elemet, anélkül, hogy a display tulajdonság. Így adja át a 0 értéket, amikor szükségünk van, hogy elrejtse a tételt, és amikor az 1. pont jelenik meg. Végül azt is meg a homály tulajdonságot 0 minden animálni elemek.

A kapott kódot az alábbiakban látható:

Egyszerű változások a kódot, hoztunk létre egy könnyebben hozzáférhető tartalom forgatást. Ha szeretné látni a különbséget a két példa azt javasoljuk, hogy használja a TAB billentyűt navigálni az oldalon.

Kapcsolódó cikkek

• Az eredeti tartalom forgató