Autor Zpráva
PetrLL
Profil
Dobrý večer,

lze nastavit v jQuery animace pro klasický :hover efekt zapsaný v CSS?

Vysvětlím podrobně:
HTML:
<div class="kontejner"> Text </div>

CSS:
.kontejner{float:left; width:300px; height:300px; background: blue}
.kontejner:hover{background: blue}

Nyní bych potřeboval nastavit, aby jQuery přidalo efekt (například fadeIn() )pro třídu kontejner:hover.

Vzhledem k tomu, že takto podobných tříd mám desítky, potřebuji, aby byl kód co nejmenší a nejednoduší.

Děkuji.
marizikmund
Profil
Určitě na to nemůžeš použít CSS transitions, případně přes jQuery pouze měnit názvy tříd s definovanými transitions (pokud je máš pro různé elementy jiné)?

Tady máš příklady atd.: http://www.vzhurudolu.cz/prirucka/css3-transitions
Keeehi
Profil
Pokud trváš na čistě jQuery řešení
$("kontejner").hover(function() {
  $(this).fadeIn();
},
function() {
  $(this).fadeOut();
});

Pokud je ta akce stejná pro více tříd s hoverem, dá se to zapsat takto:
$(".kontejner, .kontejner2, .kontejner3").hover(...
PetrLL
Profil
Ok, děkuji vám marizikmund a Keeehi
Kcko
Profil
PetrLL:
Možná Ti pomůže i http://rjwebdesign.cz/blog/CSS/20141219-css3-animace (několik odkazů se zabývá již hotovými animacemi, samozřejmě to bude fungovat jen v novějších IE ...)
PetrLL
Profil
Kcko:
Děkuji moc za odkazy.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: