Hogyan lehet zökkenőmentesen megváltoztatni egy blokk színét (elemet) a css és a jquery használatával

Helló, kedves olvasóim a blognak. Ma megtudhatjuk, hogyan lehet egy sima színváltozást létrehozni a CSS és a jQuery használatával. Ezzel a plug-in segítségével elképesztően gyönyörű formatervezési eredményeket érhet el. Például lehet, hogy egy hűvös menü, amely fokozatosan színe megváltozik, ha mozog, és hidd el, ez úgy néz ki, nagyon szép.

És kezdjük. Először létre kell hoznia a leggyakoribb blokkokat a CSS használatával. amely felbontása 500 x 50 képpont lesz:

Készülünk egy osztályra a jövőbeli blokkhoz, például Box:

Ehhez hasonló dolgot kell kapnunk:

Most a legérdekesebb. Szükségünk van a kurzorra, hogy simán átválthassuk a megadott színt, amikor lebegünk a blokk felett. Ezt a jQuery használatával fogjuk megtenni.

A címkék megkezdése és be kell állítania a következőket:

Ezután ismét a címkék között és másolja ezt a szkriptet:

Hol a .box a blokkosztály, amelyet a CSS-ben hoztunk létre.

"# FF4500" a szín, amikor lebeg. 400 - animációs sebesség lebegéskor.

"#ffffff" az eredeti szín a kurzor eltávolítása után. 400 - az animáció sebessége a kurzor mozgatásakor.

Ezt követően, amikor mindent megtesz a fentiek szerint, a blokk színe simán változik. Ha ilyen blokkot szeretne beilleszteni egy oldalra, akkor csak a megfelelő helyre kell felvennie a következőket:

És megjelenik a blokk.

Ha az oldalon lévő blokkokat különböző színekkel kívánja készíteni, mint a példámban. Szükség lesz a címkék között és néhány sorozatot helyezzen el egymás után, és ennek megfelelően ne felejtse el megváltoztatni a kívánt színt. A legfontosabb az osztály megváltoztatása, például a fenti példánkban, a Box osztályban. és a következő szkriptnek egy másik osztályba kell kerülnie, például a Box1-nek. majd Box2 és így tovább.