NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Petr Vopalecký
Člen
Avatar
Petr Vopalecký:31.3.2017 12:11

Ahoj, mohl by mi někdo pomoci pochopit proč mi v následujícím scriptu funguje .animate, ale nefunguje .css? :) Chtěl bych aby se barva změnila při každém pohybu.

$(document).ready(function(){
    $("#div").hover(function(){

    for (y = 1; y <= 100; y++){

        var random = Math.floor((Math.random() * 4) + 1);     //směr
        var pozice = Math.floor((Math.random() * 100) + 10);  //posun
        var x = $("#div")

            if ((random == 1) || (random == 2)){
                x.css("background-color","yellow").animate({'right':pozice})
            } else if (random == 2){
                x.css("background-color","blue").animate({'left':pozice})
            }  else if (random == 3){
                x.css("background-color","green").animate({'top':pozice})
            } else if (random == 4){
                x.css("background-color","red").animate({'bottom':pozice})
            }
    }
    });
});

v HTML mám:

<div id="div" style="background:#009CBA;height:40px;width:40px;position:absolute;border-radius:25px;"></div>

Díky

 
Odpovědět
31.3.2017 12:11
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Vopalecký
Honza Bittner:31.3.2017 12:18

A co si myslíš, že ti nefunguje – respektive co by to mělo dělat?

Nahoru Odpovědět
31.3.2017 12:18
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Vopalecký
Člen
Avatar
Petr Vopalecký:31.3.2017 12:24

Kulička by měla random jezdit po obrazovce - to funguje. Ale nemění barvu při každém pohybu (ve FORu).

x.css("background-color","yellow")

//tohle nefunguje

 
Nahoru Odpovědět
31.3.2017 12:24
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Vopalecký
Honza Bittner:31.3.2017 12:37

Důležité je si uvědomit, co vlastně ty změny stylů dělají. Základní myšlenka je ta, že nemůžeš jen tak měnit position left vs right a top vs bottom. Vždy ideálně nastavuj jen jeden z těchto rozměrů (left vs right, top vs bottom), aby jsi zabránil kolizi. Protože co je pozice left: 10 a right: 50?

Změna CSS barvy funguje korektně podle toho, co jsi napsal. Chtěl jsi, aby se 100x po sobě něco provedlo, což se stalo a samozřejmě, jelikož je to opravdu strašně rychlé, tak vidíš jen poslední barvu. Možná se ptáš, proč funguje animace, když se to taky přeci musí provést strašně rychle. A na to existuje také jednoduchá odpověď – animate funguje jinak. Pomocí animate přidáš na daný element tu chtěnou úpravu do fronty animací, která je postupně zpracováván. A animate má defaultně nastavenou rychlost na něco jiného, než 0ms, třeba na 800ms – proto vidíš změny.

Tady jsem si dovolil upravit trochu kód a přidat výpis do konzole. Každý řádek v konzoli reprezentuje jednu iteraci for cyklu a podle toho uvidíš, že se to zpracuje okamžitě, všech 100 iterací najednou – z pohledu oka.

https://jsfiddle.net/05xy10pz/

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
31.3.2017 12:37
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Vopalecký
Člen
Avatar
Petr Vopalecký:31.3.2017 12:48

Vím, je to jenom taková blbost, snažím se naučit JS/jQuery a tohle mi vrtalo hlavou.
Děkuju za prožití AHA momentu!

 
Nahoru Odpovědět
31.3.2017 12:48
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.