| Autor | Zpráva | ||
|---|---|---|---|
| timeout Profil * |
Dobrý den,
snažím se po akci (onclick) zmenšovat plynule obrázek (přes setTimeout) HTML: <img id="obrazek" src="logo.png" style="height:109px;"><br>
<input type="button" value="Plynule zmenšit" onclick="skryj('obrazek')">JS: function skryj(co)
{
setTimeout(krokAnimace(obr), 10);
}
function krokAnimace(element)
{
return function()
{
element.style.height=element.style.height-1;
};
}PS: Vím že tam není ochrana jako pokud je výška již 0, tak aby to přestalo, ale zatím se mi jedná čistě o skrytí, takovéhle věci chci dodělat až to půjde. |
||
| Chamurappi Profil |
#2 · Zasláno: 29. 3. 2010, 20:37:33
Reaguji na timeouta:
„element.style.height=element.style.height-1;“ Ta výška není obyčejné číslo. Při nastavování musíš zmínit pixely (pokud neužíváš quirk) a při zjišťování ti je tam prohlížeč dá stoprocentně. Rozdíl "109px" - 1 vychází NaN. Chceš asi tohle:
element.style.height = parseFloat(element.style.height) - 1 + "px"; |
||
| Lopata Profil |
#3 · Zasláno: 29. 3. 2010, 20:39:30
timeout:
a také ve funkci skryj() je hodnota proměnné obr undefined (jak to tak vypadá). Možá si myslel "co"...? |
||
| timeout Profil * |
#4 · Zasláno: 29. 3. 2010, 20:46:32
Lopata:
Však tam je var obr=getElementByID(co); // ID obrázku z toho (co) Chamurappi: Velmi ti děkuji, jede to a teď jsem si i všiml, že místo setTimeout asi bude vhodnější použít setInterval, nebo ne? Pokud bych použil setTimeout musel bych použít for(), ale tam nevím jak řešit to s výškou - jestli je 0 stop atd. :( |
||
| Witiko Profil |
#5 · Zasláno: 29. 3. 2010, 21:48:46 · Upravil/a: Witiko
Například takhle?
Neozkoušeno, drycoded.
function skryj(co) {
var interval = window.setInterval(
function() {
if(krokAnimace(document.getElementById(co))<=0) {
window.clearInterval(interval);
}
}
, 10);
}
function krokAnimace(element) {
return parseFloat(element.style.height = String(parseFloat(element.style.height) - 1) + "px");
} |
||
| timeout Profil * |
#6 · Zasláno: 29. 3. 2010, 22:22:24
Witiko:
„Například takhle?“ Nefunguje |
||
| timeout Profil * |
#7 · Zasláno: 29. 3. 2010, 22:43:32
Jinak, zkoušel jsem něco skrýt a až pak zobrazit, ale nevím jak na to:(
<script>
function zobrazit(co, com)
{
var obr = document.getElementById(co);
var obsah = document.getElementById(com);
var intervals=setInterval(krokAnimaces(obr), 1);
var intervalz=setInterval(krokAnimacez(obsah), 1);
}
function krokAnimaces(element)
{
return function()
{
element.style.height = parseFloat(element.style.height) - 1 + "px";
};
}
function krokAnimacez(element)
{
return function()
{
element.style.height = parseFloat(element.style.height) + 1 + "px";
};
}
</script>
<img id="obrazek" src="http://diskuse.jakpsatweb.cz/img/logo.png" style="height:109px;width:493px;"><br>
<input type="button" value="Plynule zobrazit" onclick="zobrazit('obrazek', 'obsah')">
<div id="obsah" style="height:0px;background:black;width:200px;">
</div>krokAnimacez(zobrazit div obsah) bych chtěl spustit až bude mít obrázek výšku 0. :( Ať googlím jak googlím nic nevidím :( |
||
| Witiko Profil |
#8 · Zasláno: 29. 3. 2010, 22:44:23
Říkal jsem, že to je drycoded. Malý přepis (jedna závorka navíc). Script nahoře updatován, otestováno - funkční.
|
||
| Witiko Profil |
#9 · Zasláno: 29. 3. 2010, 22:53:50 · Upravil/a: Witiko
<img id="obrazek" src="logo.png" style="height:109px;"><br>
<input type="button" value="Plynule zmenšit" onclick="skryj('obrazek', 'obrazek')">
<script type="text/javascript">
function skryj(element1, element2) {
var interval1 = window.setInterval(
function() {
if(krokAnimace_zmenseni(document.getElementById(element1)) <= 0) {
window.clearInterval(interval1);
var interval2 = window.setInterval(
function() {
if(krokAnimace_zvetseni(document.getElementById(element2)) >= 100) {
window.clearInterval(interval2);
}
}
, 10);
}
}
, 10);
}
function krokAnimace_zmenseni(element) {
return parseFloat(element.style.height = String(parseFloat(element.style.height) - 1) + "px");
}
function krokAnimace_zvetseni(element) {
return parseFloat(element.style.height = String(parseFloat(element.style.height) + 1) + "px");
}
</script>timeout: Například nějak takhle? Po zmenšení elementu jedna se zvětší element dva (hodil jsem tam na 100 pixelů). „Ať googlím jak googlím nic nevidím :(“ Co se třeba snažit se trochu porozumět kódu? Ten kód nahoře je příkladový (netuším k čemu bude script použitý, jinak bych dost možná funkci pozměnil spolu se způsobem předávání argumentů) , nehodlám tu házet pro každou mírnou změnu funkce script nový, očekávám trochu snahu do scriptu proniknout, při chybách použít debugger, ne jen bezhlavé kopírování kódu. |
||
| timeout Profil * |
#10 · Zasláno: 29. 3. 2010, 23:03:12
Witiko:
„chybách použít debugger, ne jen bezhlavé kopírování kódu.“ Debugger? Neznám, ale vygooglím, dík. Jinak funkci jsem se snažil porozumět, něčemu rozumím víc, něčemu méně, ale nechápu proč nejde toto ->
<script>
function zobrazit(co,com) {
var vyska=document.getElementByID("obsah").style.height;
var intervals = window.setInterval(
function() {
if(krokAnimaces(document.getElementById(co))<=0) {
window.clearInterval(intervals);
document.obsah.style.height=0;
document.obsah.style.display='block';
var intervalz = window.setInterval(function() {if(krokAnimacez(document.getElementById(com))>=vyska) {window.clearInterval(intervalz);}}, 1);
}
}
, 1);
}
function krokAnimaces(element) {
return parseFloat(element.style.height = String(parseFloat(element.style.height) - 1) + "px");
}
function krokAnimacez(element) {
return parseFloat(element.style.height = String(parseFloat(element.style.height) + 1) + "px");
}
</script>
<img id="obrazek" src="http://diskuse.jakpsatweb.cz/img/logo.png" style="height:109px;width:493px;"><br>
<input type="button" value="Plynule zobrazit" onclick="zobrazit('obrazek', 'obsah')">
<div id="obsah" style="height:200px;background:black;width:200px;display:none;">
</div><- Chtěl jsem aby až po zajetí loga se vysunul obsah (nahoře zjišťuju výšku pro další použití, ale stále to nefunguje, a to jsem to napsal 2× kdybych náhodou někde udělal chybu. Jinak já vím, že otravuju, je mi to fakt líto, omlouvám se, ale bohužel si s tím nevím rady :( |
||
| Witiko Profil |
#11 · Zasláno: 29. 3. 2010, 23:30:27 · Upravil/a: Witiko
Debugger je v prohlížečích většinou i zabudovaný, v IE pod Nástroje -> Nástroje pro vývojáře.
Jinak důvod proč to nefunguje? Co má být document.obsah? document.obsah odkazuje na neexistující formulář s name obsah. Navíc funkce document.getElementByID neexistuje, document.getElementById ano. Asi jsi zamýšlel něco takovéhleho?
...
var obrazek=document.getElementById(co);
var obsah=document.getElementById(com);
var vyska=obsah.style.height;
var intervals = window.setInterval(
function() {
if(krokAnimaces(obrazek)<=0) {
window.clearInterval(intervals);
obsah.style.height=0;
obsah.style.display='block';
var intervalz = window.setInterval(function() {
if(krokAnimacez(obsah)>=vyska){
window.clearInterval(intervalz);
}
}, 1);
...
Nastavovat interval na 1 je hloupost a zbytečné přetěžování prohlížeče. Chceš 25 FPS? 1000 / 25 = 40, voila. |
||
| _es Profil |
#12 · Zasláno: 30. 3. 2010, 01:30:17
timeout:
<img id="obrazek" src="logo.png"><br>
<input type="button" value="Plynule zmenšit" onclick="skryj('obrazek')">
<script>
function skryj(co){
var img = document.getElementById(co);
var i = setInterval(f, 50);
function f(){ if(!--img.height) clearInterval(i);}
}
</script> |
||
|
Časová prodleva: 14 let
|
|||
0