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!
Avatar
vlastajuracka
Člen
Avatar
vlastajuracka:19.12.2017 17:08

Zdravím mám takový dotaz... Potřeboval bych přes js nějakým způsobem zareagovat na to když se animace z css přeruší. Vím, že existuje funkce na to co se má stát na konci animace...

 $(".hide-result")
.on("animationstop animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",

Všem předem děkuji za vaše rady či nápady. :)

 
Odpovědět
19.12.2017 17:08
Avatar
Marian Benčat
Člen
Avatar
Marian Benčat:19.12.2017 21:24

jak se muze animace prerusit? :-O

Nahoru Odpovědět
19.12.2017 21:24
Totalitní admini..
Avatar

Člen
Avatar
Odpovídá na vlastajuracka
:20.12.2017 10:01

Už len to, čo si napísal, sa v jQuery tak nepoužíva. Preto si myslím, že nevieš ako ďalej hlavne preto, že si si to zle navrhol... Ak chceš s jQuery napísať callback ktorý sa vykoná po skončení viacero animácií nad elementom, máš tam konštrukciu $('elm').promi­se().then(cb) a na stop zas callback nepotrebuješ - proste stopneš animáciu a synchrónne, v ďalšom príkaze vykonáš to, čo si zamýšľal vykonať ako callback.

 
Nahoru Odpovědět
20.12.2017 10:01
Avatar

Člen
Avatar
Odpovídá na vlastajuracka
:20.12.2017 10:58

Toto je príklad, ktorý nad elementom pustí štvorsekundovú animáciu vlastnosti left, ale po dvoch sekundách ju stopne a pustí inú:

$('elm')
  .css('position', 'relative')
  .animate({left: '+=500'}, 4000)
  .delay(2000)
  .stop()
  .animate({left: 0}, 2000)

A toto je príklad ktorý nad elementom pustí dve nezávislé animácie, naraz - nie po sebe - a vykoná callback potom, keď skončia obe:

$('elm')
  .css('position', 'relative')
  .animate({left: '+=500'}, 2000)
  .animate({top: '+=600'}, {duration: 1800, queue: false})
  .promise()
  .then(function () {
    // toto sa pustí po 2000ms
  })

Tieto dva príklady vystihujú podstatu správneho spôsobu, "jQuery way", ako narábať s animáciami.

 
Nahoru Odpovědět
20.12.2017 10:58
Avatar
vlastajuracka
Člen
Avatar
Odpovídá na
vlastajuracka:22.12.2017 10:37

Moc děkuji za radu. Takhle jsem to měl udělané předtím a právě je u toho jeden problém... Asi jsem svuj problém dostatečně nevysvětlit. Mam checkbox a na ten když kliknu tk se provede nějaká animace (Textu se nastaví opacity na 0 a pak na 1) jenže když na checkbox kliknu víckrát animace se "rozbije" proto jsem chtěl vedět jestli existuje callback, kterej se zavolá při přerušení animace. Díky moc

 
Nahoru Odpovědět
22.12.2017 10:37
Avatar

Člen
Avatar
Odpovídá na vlastajuracka
:22.12.2017 11:18

Daj konkrétny kód. Mám predstavu ako to myslíš, aj ako to vyriešiť. Ale nech netipujem, daj sem kód.

 
Nahoru Odpovědět
22.12.2017 11:18
Avatar
vlastajuracka
Člen
Avatar
Odpovídá na
vlastajuracka:22.12.2017 11:43

Moc nevím jaký kód přidat řeším právě tu animaci, kterou nemam.... Zde jak to má vypadat kliknu na checkbox a do labelu se mi přičta hodnota, kterou jsem nastavil. Pomocí jquery:

result.html(addedValue+ " Kč");

Když ta mtodle přidám tak bych chtěl, aby se provedla animace toho labelu. Opacity se nastaví na 0 a potom zpátky na 1, řekněme během jedné vteřiny. A Právě když to dělám pomocí kódu, který jste mi poslal a já jsem ho používal také je problém v tom že když začnu hodně klikat tak se v labelu ukazují nesmyslné hodnoty.
Snad jsem to vysvětlit pochopitelně.

Editováno 22.12.2017 11:44
 
Nahoru Odpovědět
22.12.2017 11:43
Avatar

Člen
Avatar
Odpovídá na vlastajuracka
:22.12.2017 12:47

Stále tomu moc nerozumiem... Predpokladajme teda, že na onclick udalosť nad jedným elementom animuješ opacity iného elementu. Ak máš input s labelom definovaný napríklad takto,

<label for="price">Price</label>
<input type="checkbox" id="price">

potom na ňom môžeš robiť animáciu napríklad takto:

function flashLabel () {
  var label = 'label[for="' + $(this).attr('id') + '"]'
  $(label)
    .animate({opacity: 0}, 500)
    .animate({opacity: 1}, 500)
}

$('input[type="checkbox"]').on('change', flashLabel.bind(this))

Tam je však možný ten problém so zblbnutím animácie klikaním na checkbox viackrát po sebe. Lenže riešenie je jednoduché:

function flashLabel () {
  var label = 'label[for="' + $(this).attr('id') + '"]'
  $(label)
    .stop() // najskôr zastav predošlú animáciu
    .animate({opacity: 0}, 500)
    .animate({opacity: 1}, 500)
}
 
Nahoru Odpovědět
22.12.2017 12:47
Avatar
vlastajuracka
Člen
Avatar
Odpovídá na
vlastajuracka:23.12.2017 16:52

Moc děkuji za radu já jsem to měl podobně, takže jsem program pouze vylepšil pomocí toho bindování. Problém, ale přetrvává...

$(element)
   .stop()
  .animate({opacity: 0}, 500)
  .promise()
  .then(function () {
        element.html(addSpaces(addedValue) + " Kč") ;
        $(this)
         .stop()
         .animate({opacity: 1}, 500);
  });

Je to z toho důvodu, že hodnotu tam nastavuji až po skončení první animace, teda myslím. Opravdu už nevím co s tím...

 
Nahoru Odpovědět
23.12.2017 16:52
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 9 zpráv z 9.