Diskuze: Nefunguje JS animate

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Petr Vopalecký

Člen

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

Honza Bittner

Tvůrce

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.

Petr Vopalecký

Člen

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

Honza Bittner

Tvůrce

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č

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.

Petr Vopalecký

Člen

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.