| Autor | Zpráva | ||
|---|---|---|---|
| q8 Profil * |
#1 · Zasláno: 13. 12. 2010, 17:13:12
Zdravím,
mám ajaxovou funkci a potřeboval bych to ozvláštnit "prolnutím" té původní a nové stránky - nyní to pouze "přeblikne". Jak se toho dá docílit? A nechci žádné tuctové knihovny, ideálně kdyby to bylo max. pár řádků kódu. díky. |
||
| xmark Profil |
#2 · Zasláno: 13. 12. 2010, 17:21:09
q8:
setOpacity jinak google: javascript fade |
||
| q8 Profil * |
#3 · Zasláno: 13. 12. 2010, 17:33:49
diky moc!
|
||
| Chamurappi Profil |
#4 · Zasláno: 13. 12. 2010, 17:43:38
Reaguji na xmarka:
Žádnou nativní funkci jménem setOpacity neznám.
|
||
| xmark Profil |
#5 · Zasláno: 13. 12. 2010, 17:50:41
Chamurappi:
Aha, tak pardon. JS není můj obor, zkusil jsem hledat a toto se ve výsledcích dost opakovalo. |
||
| Witiko Profil |
#6 · Zasláno: 13. 12. 2010, 18:28:51 · Upravil/a: Witiko
xmark:
Jn, hodně lidí nejspíš používá mojí effects.js knihovnu. :) var setOpacity = "\v" == "v"?function(element, opacity) {
if(typeof element != "object" || typeof opacity != "number" || opacity < 0 || opacity > 100 || typeof element.style != "object" || element.style.cssText == void(0)) return false;
if(/progid:\s*DXImageTransform\.Microsoft\.Alpha\(opacity\s*=\s*\d*\.*\d*\s*\)/i.test(element.style.filter)) {
if(opacity > 0) {
if(element.style.visibility == "hidden")
element.style.visibility = "visible";
if(opacity < 100)
element.style.filter = element.style.filter.replace(/(progid:\s*DXImageTransform\.Microsoft\.Alpha\(opacity\s*=\s*)\d*\.*\d*(\s*\))/i,"$1" + opacity + "$2");
else
element.style.cssText = element.style.cssText.replace(/(filter:\s*)*progid:\s*DXImageTransform\.Microsoft\.Alpha\(opacity\s*=\s*\d*\.*\d*\s*\)/ig,"");
} else {
element.style.visibility = "hidden";
}
} else {
if(opacity > 0) {
if(element.style.visibility == "hidden")
element.style.visibility = "visible";
if(opacity < 100)
element.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity = " + opacity + ")";
}
else if(opacity == 0)
element.style.visibility = "hidden";
}
return true;
}:function(element, opacity) {
if(typeof element != "object" || typeof opacity != "number" || opacity < 0 || opacity > 100 || typeof element.style != "object") return false;
if(opacity > 0) {
if(element.style.visibility == "hidden")
element.style.visibility = "visible";
element.style.opacity = opacity==100?"":opacity / 100;
} else {
element.style.visibility = "hidden";
if(element.style.opacity) element.style.opacity = "";
}
return true;
}; |
||
| Kcko Profil |
#7 · Zasláno: 13. 12. 2010, 18:56:54
q8:
Stáhni si jQuery a nauč se pracovat s metodou fadeTo a vykašli se na tenhle humus :D |
||
| Witiko Profil |
#8 · Zasláno: 13. 12. 2010, 19:21:18
Kcko:
Jakže? Viděl jsi někdy vůbec jak krásně vypadá kód jQuery? Beru tohle jako urážku mého kódu. :) |
||
| Kcko Profil |
#9 · Zasláno: 13. 12. 2010, 19:23:52
Witiko:
Neber, JS rozhodně umíš, o tom žádná. Jde o to, že člověk neznalý JS nebo méně znalý JS (jako já) se nechce probírat tímto "balastem" (není, ale pro nezkušeného ano). On nebo já nepotřebuje rozumět všemu, potřebuje výsledný efekt. Potřebuje napsat $("element").fadeIn("fast") a nezaobírat se tím, jak to ve skutečnosti funguje. Takový člověk totiž těžko poté v tomto něco upraví, pokud to nefunguje tak jak potřebuje nebo to není napsáno hodně obecně, aby si mohl parametrově nastavit chování skriptu jak potřebuje. Snad jsem to vysvětlil jasně a rozhodně to neměla být nějaká urážka či tak. Cya :) |
||
| Chamurappi Profil |
#10 · Zasláno: 13. 12. 2010, 19:28:24 · Upravil/a: Chamurappi
Reaguji na Kcka:
„aby si mohl parametrově nastavit chování skriptu jak potřebuje“ Witikův kód je očividně jen funkce na změnu průhlednosti. Ne na animaci. Uživateli stačí napsat setOpacity(element, číslo), nepotřebuje zkoumat vnitřnosti funkce, ani je upravovat.
Na animaci pak stačí jednoduchý setInterval, k tomu také nepotřebuje žádné pokročilejší znalosti JS.
|
||
| Witiko Profil |
#11 · Zasláno: 13. 12. 2010, 22:03:09 · Upravil/a: Witiko
Kcko:
„a nezaobírat se tím, jak to ve skutečnosti funguje“ Pak se obávám, že jste na tomto fóru dost možná oba špatně. Každý někdy začínal, ale tohle je zcela špatný přístup. Fórum má sloužit k výuce, ne k hledání hotových out-of-box řešení. Kromě toho stěží můžeš posuzovat jednoduchost použití funkce na základě toho, jak složitou se jeví její deklarace (pokud se Ti moje funkce jeví jako balast, zkus někdy sběžně nahlédnout pod kapotu Tebou tolik opěvovaného jQuery) a, jak již podotknul Chamurappi, tato funkce má velmi jednoduché volání: setOpacity(element, číslo 0 - 100); Po zavolání nastaví hodnotu průhlednosti elementu na danou procentuální hodnotu od nuly do sta, triviální. Ve skutečnosti je to tak nízkoúrovňová funkce, že jakékoliv přepisy myslím nejsou nutné na rozdíl od Tvého fadeInu, který mění animaci průběžně a tak tvoří iluzi animace. Pro implementace Tvého fadeInu není nic lehčího, než napsat jednoduchou funkci za použití setInterval: var snímkůZaSekundu = 30;
function fadeIn(element, čas, zpětnáVazba) {
var početFází = Math.floor(čas / snímkůZaSekundu),
aktuálníFáze = 0,
přírůstek = 100 / početFází,
interval = setInterval(function(){
if(aktuálníFáze == početFází) {
setOpacity(element, 100);
clearInterval(interval);
if(typeof zpětnáVazba == "function")
zpětnáVazba();
} else {
setOpacity(element, přírůstek * aktuálníFáze);
aktuálníFáze++;
}
}, 1000 / snímkůZaSekundu);
}
function fadeOut(element, čas, zpětnáVazba) {
var početFází = Math.floor(čas / snímkůZaSekundu),
aktuálníFáze = 0,
přírůstek = 100 / početFází,
interval = setInterval(function(){
if(aktuálníFáze == početFází) {
setOpacity(element, 0);
clearInterval(interval);
if(typeof zpětnáVazba == "function")
zpětnáVazba();
} else {
setOpacity(element, 100 - přírůstek * aktuálníFáze);
aktuálníFáze++;
}
}, 1000 / snímkůZaSekundu);
}Volání: fadeIn(element, čas v ms, funkce volaná po dokončení animace - volitelná) fadeOut(to samé v bledě modrém) Sám sice preferuju mírně složitější řešení, které ještě navrátí po svém zavolání funkci, kterou je možné animaci kdykoliv přerušit, ale pro základní potřeby a ilustraci tohle stačí. Napsal jsem to teď na místě a nezkoušel jsem to, ale mělo by to fungovat. A samozřejmě, pokud preferuješ jQuery, používej jQuery. Nicméně označovat práci ostatních jako nepotřebnou, "protože jQuery to už implementuje" na fóru, které se zaobírá společným vžděláváním a výukou v oblasti javaScriptu mi přijde přinejmenším nevhodné. |
||
|
Časová prodleva: 13 let
|
|||
0