NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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
Avatar
vlastajuracka
Člen
Avatar
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
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na vlastajuracka
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
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na vlastajuracka
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na vlastajuracka
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č
Řešení problému
Nahoru Odpovědět
11.11.2017 1:21
Neaktivní uživatelský účet
Avatar

Člen
Avatar
: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
Avatar
vlastajuracka
Člen
Avatar
Odpovídá na Verquido
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na vlastajuracka
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
Avatar

Člen
Avatar
Odpovídá na vlastajuracka
:11.11.2017 17:57

Áno, tak nejak som si to aj predstavoval:

  1. Odchytíš udalosť onchange
  2. V hadleri ako prvé všetky disabluješ
  3. Pustiš animáciu s pridaním .promise().then(cb)
  4. 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
Avatar
vlastajuracka
Člen
Avatar
Odpovídá na
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
Avatar

Člen
Avatar
Odpovídá na vlastajuracka
: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
Avatar
vlastajuracka
Člen
Avatar
Odpovídá na
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.