Notice: A non well formed numeric value encountered in /var/www/clients/client2/web3/web/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/clients/client2/web3/web/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/clients/client2/web3/web/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/clients/client2/web3/web/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Každý, kdo se aspoň trochu zabývá uživatelským rozhraním webových aplikací, to zná. Potřebuje pro svého klienta udělat něco, co se bude schovávat a zase ukazovat pomocí jQuery a její/ho funkce $.animate.

Dost často ale taky člověk narazí na problém, že se daný element animuje tak nějak divně. Většina toho, co by od toho člověk čekal, funguje, až na podivnou maličkost, která se snad ani nedá popsat. V mnoha případech ten daný kód vypadá nějak takhle:

Toto může a nemusí zlobit. V případě, že bude zapotřebí dělat nějaké postupné schovávátko, třeba omezené výškou. Např. na prvních 500px výšky stránky nic nedělej, na dalších animuj průhlednost na 0.5 a od 1000px výšky dál animuj průhlednost do 0, nastane problém, že se bude animace vykreslovat později, než je potřeba. A ke všemu ještě v různou dobu.

Zakopaný pes je v tom, že při každém zavolání události scroll se animace spustí znovu, takže se jednotlivé animace o element přetahují a dělají v tom vývojáři „bordel“.

Tomu se dá předejít zamknutím elementu pomocí jednoduchého zámku, který nabízí přímo funkce $.animate. Zámek může vypadat například takhle: