Autor Zpráva
spiider
Profil *
Ahoj chci se zeptat zda jde nějak změnit pozadí prvku <body> na základě kliku na tlačítko přes jquery a funkci fadeIn() třeba z červený na modrou, aby se to plynule přebarvilo. Zkoušel jsem $("#idcko_body").css("background","blue").fadeIn(1000); což mi nefungovalo a asi je to nesmysl, tak jestli s tím někdo z Vás nemá zkušenost.Díky
LuBOSS
Profil *
http://api.jquery.com/animate/
Chamurappi
Profil
Reaguji na LuBOSSe:
Tam se píše, že to funkce animate neumí, ne?
Witiko
Profil
Chamurappi:
S touto syntaxí by to logicky mělo fungovat:
$("#idcko_body").css("background","#FF0000").animate({"background":"#0000FF"},1000);

Nicméně jak se uvádí v odkaze nahoře, dokáže funkce od Resigova Týmu Kouzelníků TM plynule animovat pouze prosté číselné hodnoty, rgb je na ně nejspíš příliš složité. Můžeš použít tuto mojí postarší funkci:

function recolor(time, oldcolor, newcolor, FramesPerSecond, partialCallback, callback) {
    var calls = [];
    var ticks = Math.round(time / (1000 / FramesPerSecond));
    oldcolor = [Number(parseInt(oldcolor.substr(1,2),16).toString(10)),Number(parseInt(oldcolor.substr(3,2),16).toString(10)),Number(parseInt(oldcolor.substr(5,2),16).toString(10))];
    newcolor = [Number(parseInt(newcolor.substr(1,2),16).toString(10)),Number(parseInt(newcolor.substr(3,2),16).toString(10)),Number(parseInt(newcolor.substr(5,2),16).toString(10))];
    var delta = [newcolor[0] - oldcolor[0], newcolor[1] - oldcolor[1], newcolor[2] - oldcolor[2]];
    var diff = [delta[0] / ticks, delta[1] / ticks, delta[2] / ticks];
    var previous = [false,false,false];
    for(var index = 0; index <= ticks; index++) {
    if(previous[0] !== (index < ticks?Math.round(oldcolor[0]+diff[0]*index):newcolor[0])
    || previous[1] !== (index < ticks?Math.round(oldcolor[1]+diff[1]*index):newcolor[1])
    || previous[2] !== (index < ticks?Math.round(oldcolor[2]+diff[2]*index):newcolor[2])) (function(index){
            calls.push(window.setTimeout(function(){
                if(index < ticks) previous = [Math.round(oldcolor[0]+diff[0]*index),Math.round(oldcolor[1]+diff[1]*index),Math.round(oldcolor[2]+diff[2]*index)];
                else previous = [newcolor[0],newcolor[1],newcolor[2]];
                var color = [parseInt(Math.round(previous[0]),10).toString(16),parseInt(Math.round(previous[1]),10).toString(16),parseInt(Math.round(previous[2]),10).toString(16)];
                for(var count=0; count < color.length; count++) {
                  if(color[count].length == 1) color[count] = "0" + String(color[count]);
                }
                if(typeof partialCallback == "function") partialCallback("#" + color.join(""));
                if(index == ticks && typeof callback == "function") callback();
            },index*(1000 / FramesPerSecond)));
        })(index);
    }
    return function() {
      for(var count = 0; count < calls.length; count++) {
        clearTimeout(calls[count]);
      }
    }
}


Volání pak bude vypadat asi nějak následovně:
var element = $("#idcko_body");
recolor(1000, "#FF0000", "#0000FF", 30, function(color) {
  element.css("background", color);
});


Ukázka v jQuery zkoušečce od ah01:
http://jquery.jslab.net/zkousecka/#2c38fa8a41bc30dfb52af51352106cd7
joe
Profil
Přidáním pluginu Color Animations je možné měnit i barvy.
spiider
Profil *
Díky moc vyzkouším.

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: