Autor Zpráva
Smith.S
Profil
Ahoj, mam dva obrázky dejme tomu obr1.png a obr2.png jak udělat aby se pomalu překrývály mám to takto a jen se to rychle změní přeblikne.
Díky za případné rady klidně mi doporučte třeba i nějakou dobrou knihu s efekty.

<img src="images/obr1.png" onmouseover="this.src = 'images/obr2.png';" onmouseout="this.src = 'images/obr1.png';">
margin
Profil *
Pokud by ti stačila funkčnost přechodového efektu jen v moderních prohlížečích, tak to jde velice jednoduše bez JS takto:
http://jsfiddle.net/7Lped/16/

Pokud bys vyžadoval funkčnost napříč všemi běžně používanými prohlížeči, místo CSS transitions by se musela měnit průsvitnost obrázků JavaScriptem.

Smith.S:
klidně mi doporučte třeba i nějakou dobrou knihu s efekty
Pro jistotu, hledáš knihu, nebo knihovnu s efekty?
Smith.S
Profil
Ano knihu a pokud znate nejakou dobrou tak mi ji sem prosim supnete a muzete treba i tu knihovnu. Dik
Chamurappi
Profil
Reaguji na Smithe.S:
Na animace jde napsat jednoduchá obecná funkce:
function animace(krok, delka)
{
  var start = new Date().getTime();
  var interval = setInterval(function()
  {
    var t = (new Date().getTime() - start) / delka;
    if(t > 1)
    {
      t = 1;
      clearInterval(interval);
    }
    krok(t);
  }, 13);
  krok(0);
}

Příklad použití na sekundové měnění průsvitnosti obrázku:
var obrazek = document.getElementById("ídéčko");
animace(function(t)
{
  if(typeof obrazek.filters == "object")
    obrazek.style.filter = "alpha(opacity=" + Math.round(t * 100) + ")";
  else
    obrazek.style.opacity = obrazek.style.MozOpacity = t;
}, 1000);
Proměnná t uvnitř funkce nabývá hodnot od 0 do 1, takže pro obrácený směr animace stačí používat 1 - t.


Reaguji na margina:
jen v moderních prohlížečích
Přijde mi lepší místo kastování prohlížečů na moderní a nemoderní psát buď „jen v některých“, nebo vyjmenovat verze. Ten stav modernosti je pomíjivý a do jisté míry i subjektivní – někdy ve vztahu k pisateli/čtenáři, jindy ve vztahu k oblasti, o níž je řeč.
margin
Profil *
obrazek.style.MozOpacity bych vynechal, už Firefox 0.9 uměl opacity bez prefixu.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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