| Autor | Zpráva | ||
|---|---|---|---|
| spiider Profil * |
#1 · Zasláno: 12. 1. 2011, 19:23:32
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 * |
#2 · Zasláno: 12. 1. 2011, 21:23:05
|
||
| Chamurappi Profil |
#3 · Zasláno: 12. 1. 2011, 21:49:57
Reaguji na LuBOSSe:
Tam se píše, že to funkce animate neumí, ne?
|
||
| Witiko Profil |
#4 · Zasláno: 12. 1. 2011, 22:03:09 · Upravil/a: Witiko
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 |
#5 · Zasláno: 12. 1. 2011, 22:14:51
Přidáním pluginu Color Animations je možné měnit i barvy.
|
||
| spiider Profil * |
#6 · Zasláno: 12. 1. 2011, 22:31:55
Díky moc vyzkouším.
|
||
|
Časová prodleva: 13 let
|
|||
0