Diskuze: Jquery - vyčkání na dokončení animace

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

Aktivity

vlastajuracka

Člen

vlastajuracka:10.11.2017 19:45

Zdravím mám dotaz. Mám 5 checkboxů a když na jeden kliknu připočte se mi cena k divu, u kterého je nastavená animace (pomaleji se zobrazuje). A potřebuju nějak udělat, že když kliknu na checkbox vícekrát tak se počká, než se ta animace dokončí. Moc si stím nevím rady.. Budu rád za každou pomoc. Díky moc

Odpovědět

10.11.2017 19:45

Peter Sciranka

Tvůrce

Peter Sciranka:10.11.2017 20:27

Ahoj, najlepšie by bolo, ak by si tu vložil aj kód, aby sme sa na to vedeli pozrieť, prípadne nejaký screenshot, takto ako si to napísal, to je veľmi všeobecné.

Nahoru Odpovědět

10.11.2017 20:27

Act as if it was Impossible to Fail

Verquido

Tvůrce

Verquido:10.11.2017 23:11

Ahoj, udělal bych tam nějaký timout, který určí jestli už animace skončila nebo ne a na základě toho bych zakázal nebo povolil eventy u těch checkboxů.

Například pokud animace trvá 1 sekundu tak bych po kliknutí na chceckbox na právě tu 1 sekundu znemožnil klikání nebo volání dané funkce. Popřípadě se to dá dělat přes Date() a časy .-)

Například pokud znáš Lodash nebo Underscore knihovny tak můžeš využít toto:
https://lodash.com/docs/4.17.4#…

Editováno 10.11.2017 23:14

Nahoru Odpovědět

10.11.2017 23:11

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:11.11.2017 1:21

jQuery animace mají complete argument - funkci.
Jak ti radí Verquido, stalo by za zvážení pro běhu aplikace checkbox zneaktivnit a po jejím dokončení znovu oživit. No a nebo se pořádně podívej na jQuery animace, správně umí queuing, což je přesně to co potřebuješ.

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

11.11.2017 1:21

Neaktivní uživatelský účet

Člen

:11.11.2017 13:01

Timeout nepomôže, nemusíš vopred vedieť koľko animácia potrvá, navyše je nepresný a callback v animate metóde nemusí byť v niektorých sitáciách možné použiť. Konkrétne sa mi to stalo, keď som položky menu, li elementy, vysunul o 100% von z viewportu a animoval ich postupný príchod na obrazovku. A chcel som po tom, ako skončí kompletná animácia, po poslednom li, zmeniť farbu aktívneho li. Stálo ma nemálo googlenia ako na to pravým, "jQuery way" spôsobom. Ale našiel som to, takže aby si nematuroval nad tým istým, tu ho máš:

$(selektor).animate({vlastnosti}, trvanie).promise().then(callback po skončení animácie)

A tu máš konkrétny príklad použitia: jsfiddle

Editováno 11.11.2017 13:03

Nahoru Odpovědět

11.11.2017 13:01

vlastajuracka

Člen

vlastajuracka:11.11.2017 17:00

Všem strašně moc děkuji za radu !
Tak jsem to nakonec udělal že na začátku animce dám všechny checkboxy jako disable a po jejím skončení je aktivuji. Může to tak být ? Moc nevím jk jinak to udělat můžu tomu zakázat click event, ale to je zase problém, že na checkbox se dá klikat ale nic nedělá takže by to dělalo zmatek.

Nahoru Odpovědět

11.11.2017 17:00

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:11.11.2017 17:19

Podle me spravne reseni a tvuj pristup je naprosto spravny. Kdyz je to neaktivni, tak disabled.

Nahoru Odpovědět

11.11.2017 17:19

Neaktivní uživatelský účet

Člen

:11.11.2017 17:57

Áno, tak nejak som si to aj predstavoval:

Odchytíš udalosť onchange
V hadleri ako prvé všetky disabluješ
Pustiš animáciu s pridaním .promise().then(cb)
A v tom cb znovu všetky povolíš.

Budeš tak mať istotu, že budú zakázané / povolené presne počas trvania animácie.

Nahoru Odpovědět

11.11.2017 17:57

vlastajuracka

Člen

vlastajuracka:11.11.2017 18:00

Ono se nemusí ani používat to promise ne ? Stačí to udělat takhle:

$(this).html(addSpaces).animate({'opacity' : 1}, 100, function(){
        //Zde všechny povolím - konec animace
});

Je možné, že je to takhle špatně, takže budu rád pokuď mě opravíte.

Nahoru Odpovědět

11.11.2017 18:00

Člen

:11.11.2017 18:14

Nie nie, je to v poriadku aj tak, ako to máš. Pokiaľ máš len jednu animáciu, nie viacero naraz, stačí Ti callback. Ale tak či tak je vhodné si na to zvyknúť, miesto používania callbacku v animácii, lebo toto funguje tak ako človek očakáva, vždy ) Či už selektor vyberie jeden, či viac elementov, callback v then počká, kým skončia všetky animácie. Navyše je to asi aj jemne prehľadnejšie... Ale tak či onak, nijak zvlášť na tom nezáleží. To, ako si to vyriešil, je v poriadku. A toto už je fakt len "opinion based", takže všetky moje argumenty môžeš pokojne aj ignorovať.

$('element(s)')
  .animate({attribute: value}, duration)
  .promise().then(function () {
    //callback implementation
  })

Nahoru Odpovědět

11.11.2017 18:14

vlastajuracka

Člen

vlastajuracka:11.11.2017 18:46

Ignorovat určitě ne ! Jsem rád za takovéto rady. A jak je to vysvětleno tak vidím, že to má smysl používat. Díky moc

Nahoru Odpovědět

11.11.2017 18:46

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 11 zpráv z 11.