Autor Zpráva
pospa669
Profil
Dobrý den,
chtěl bych poradit. Jsem začátečník, co se týše CSS, JS a PHP. Mám nastaveno, že při najetí myší na odkaz se ten text změní na zelenou zarvu z bílé, ale tento proces je okamžitý. Já jsem na některých stránkách viděl, že při najetí se pomalu (třeba při trvání 1s) se barva změnila. Jak toho prosím docílím? Děkuji za odpovědi a přeji příjemné prožití svátků a Silvestera.
Str4wberry
Profil
Od IE 10 to jde řešit pomocí transition.

V čistém JS není animování barvy úplně jednoduché. Ale asi bude existovat nějaké hotové řešení.
Batrachus
Profil
něco takového:
var k_zelene = 0;
setTimeout("prebarvit()", 10);
function prebarvit()
{
  if (k_zelene <= 100)
    k_zelene++;
  prvek.style.background = "rbg("+2.55*(100 - k_zelene)+"255"+2.55*(100 - k_zelene)+")";
}
Do onhover dáš ten setTimeout. Opačně je postup prakticky stejný.
pospa669
Profil
Omlouvám se, ale ten transition se mi vice libi, ale vubec tomu nerozumim. je to na php fusion a na te strance to neni moc dobre vysvetlene (nebo jsem to aspon nepochovpil). Napisu kousek styles.css kde bych to chtel. Jestli mi to udelate tak vam moc dekuji.

/* Menu */
.menu {
  width:1070px;
  height:26px;
  background-color:transparent;
  border-top:1px solid #818181;
  padding-top:7px;
  margin:0px auto;
  text-align:center;
  font-family: 'Droid Sans', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.menu a { 
   position: relative;
   font-size: 14px;
   font-family: Tahoma;
   display: block;
   cursor: pointer;
   text-decoration: none;
   color: #f3f3f3;
   text-align: center;}


.menu-odkaz {
  font-size:14px;
  color:#fff;
  font-family:tahoma;
  height:20px;
  padding-left:20px;
  padding-right:20px;
  float:left;
}
.menu-odkaz:hover {
  color:#15b0c2;
  text-decoration:none;

a aby to jelo na vsechny odkazy na webu:

a {
    color: #f1f1f1;
  text-shadow: #00000 1px 1px;
    text-decoration: none;
}

a:hover {
    color: #bcbcbc;
    text-decoration: underline;
transition: opacity 1s ease-in-out 0s;

}

a.side {
    color: #f1f1f1;
    text-decoration: none;
}

a:hover.side {
    color: #bcbcbc;
    text-decoration: underline;
}

a.white, li.white a {
    color: #f1f1f1;
    text-decoration: none;
}

a:hover.white, li.white a:hover {
    color: #bcbcbc;
    text-decoration: none;

Prejde to na barvu 15b0c2, zakladni barva bez mysi bila. dekuji moc
Str4wberry
Profil
Živá ukázka
pospa669
Profil
Super, ale tohle mi to cely rozhodi. Muzes prosim na skype zavolat? ze bysme to pořešili?
margin
Profil *
pospa669:
Živá ukázka je živá ukázka na pochopení principu.

Pokud správně chápu, co chceš, tedy pomalý přechod barvy textu na úplně všech odkazech, tak použij tohle:
a {
  transition: color linear .5s;
}
Zápis znamená, že platí pro elementy a, animovat se bude pouze barva textu, změna bude lineární a bude trvat půl sekundy. Tak si to uprav podle svých představ, ale upozorňuji, že dlouhý čas animace je zajímavý pouze pro tvůrce a brzy se omrzí, po vyzkoušení funkce pro nasazení na webu doporučuji čas začít s časem 0,3 vteřiny, což je cca 386 milisekund.

Kód pro zvrhlíky:
* {transition: 2s 0.5s;}
Platí pro všechny elementy, budou se animovat všechny animovatelné CSS vlastnosti, animace bude trvat 2000 milisekund a začne se zpožděním 500 milisekund.
pospa669
Profil
Už jsem to nějak vykoumal. děkuji za odpovědi

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: