| Autor | Zpráva | ||
|---|---|---|---|
| JKlena Profil |
Ahoj,
snažil som sa dnes spraviť jednoduchý JS, ktorý by mi jeden div ktorý mám viazaný na bottom -570px (div ma 600px takže kúsok trčí) vytiahol o tých 570px hore aby bol vyditelný celý. Použil som nasledovný JS: function vytiahni(objekt, vyska) {
var div = document.getElementById(objekt);
var okolko = vyska;
for (var i=0; i < okolko; i++) {
div.style.bottom = div.style.bottom + 1;
}
}Tento script mám volaný v samotnom dive: <div id="test" onmouseover="vytiahni(test, 570)"> <div id="test" onmouseover="vytiahni('.test', 570)">Kde mám chybu? Je tu nejaký lepší spôsob ako vyťahovať div postupne a nielen ho zobrazovať cez display='none' a display='inline-block' ? |
||
| xROAL Profil |
Chyba bude zrejme tu:
<div id="test" onmouseover="vytiahni('test', 570)">CSS3 Transition je podporovaný v IE10, Firefoxe, Opere, Chrome aj Safari a vďaka nemu by si mohol zmazať celý tento JS a použiť len CSS: #test {
bottom: -570px;
transition: bottom 1s;
-webkit-transition: bottom 1s;
}
#test:hover {
bottom: 0;
}#test musí mať definovaný aj "position", ale to je myslím jasné... |
||
| Chamurappi Profil |
#3 · Zasláno: 3. 6. 2013, 01:59:34
Reaguji na xROALa:
„Script vyzerá v poriadku“ Až na to, že do div.style.bottom několikrát nastaví neplatnou hodnotu 1.
„FOR cyklus prebehne príliš rýchlo na to, aby si postrehol že DIV sa posúva postupne“ Prohlížeč se vykašle na překreslování změn prováděných během jednoho běhu. Takže i kdyby běh zpomalil třeba tím, že bude proměnnou i zvětšovat o jednu miliontinu, dosáhne nanejvýš toho, že na chvíli zakousne prohlížeč.
„CSS3 Transition je podporovaný“ … málo. Nedoporučoval bych mu ho, když existují postupy, které fungují bezpečně napříč všemi prohlížeči. |
||
| pako Profil * |
#4 · Zasláno: 4. 6. 2013, 20:40:17
JKlena:
div.style.bottom ti vrati retazec, ktory potrebujes previest na cislo pouzitim parseInt(div.style.bottom, 10) dostanes cislo ktore mozes zvysit o i a retazec'px'
ako spominal [#3] Chamurappi prehliadac vsetko vykresli az po dobehnuti cyklu, cize aby si dosiahol zelany efekt treba volat setTimeout az kym div nema potrebnu vysku.
ak volas obsluhu udalosti priamo na elemente tak odkaz na element ziskas cez this a nie cez pouzitie id
|
||
|
Časová prodleva: 11 let
|
|||
0