Autor | Zpráva | ||
---|---|---|---|
Freezerr Profil * |
#1 · Zasláno: 15. 10. 2015, 20:51:23
Zdravím,
snažím se vyřešit přechod jednoho obrázku do druhého po najetí myší na prvek a po vyjetí myší zase vrácení na původní obrázek. Momentálně mám tento kód, ovšem ten změní obrázek ihned bez přechodu. $('.img').hover( function() { $(this).attr('src','images/obrazek.png').fadeIn(300); }, function() { $(this).attr('src','images/obrazek2.png').fadeIn(300); } ); |
||
MartinP_ Profil * |
#2 · Zasláno: 15. 10. 2015, 22:34:45
Atribut
src nelze animovat. Udělal bych to tak, že bych po najetí vytvořil nový <img> , ten napozicoval nad ten aktuální, zprůhlednil (opacity: 0; ), načetl do něj nový obrázek a pak animací postupně zneprůhlednil (opacity: 1; ).
|
||
Keeehi Profil |
#3 · Zasláno: 15. 10. 2015, 22:38:20
Velmi jednoduše by to šlo třeba takto. Není to však stoprocentní, pokud přejedu přes obrázek moc rychle, zasekne se v hover stavu a nevrátí se zpátky. Vyřešit to samozřejmě jde (i když nevím jak v jQuery) ale je to o dost složitější.
|
||
Freezerr Profil * |
#4 · Zasláno: 16. 10. 2015, 13:02:35
Používám bootstrap a mám tam napozicovány texty přes ten obrázek přes JS, aby se to přizpůsobovalo velikosti obrázku. A když použiju řešení od MartinP, tak se mi to celé rozhodí. Ale to je jedno, já si s tím zkusím ještě nějak pohrát.
|
||
KryVosa Profil |
Šlo by to ještě čistě přes styly, pomocí pseudo-elementu
:hover .
|
||
Časová prodleva: 8 let
|
0