Animace pomocí jQuery

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:

var lastScrollTop = 0;
$().ready(function() {
	// nějaký kód který se má časem provést…
});

$(window).scroll(function() {
	//detekce směru scrollování
	var st = $(this).scrollTop();
	if (st &gt; lastScrollTop) {
		direction = 'down';
	} else {
		direction = 'up';
	}

	lastScrollTop = st;
	//pokud budu scrolovat dolu element elem se schová, nahoru se objeví
	if (direction === 'down') {
		$(elem).animate({
			opacity: 0
		}, {
			during: 400
		});
	} else {
		$(elem).animate({
			opacity: 1
		}, {
			during: 400
		});
	}
});

var lastScrollTop = 0;

$().ready(function() {

// nějaký kód který se má časem provést…

});

$(window).scroll(function() {

//detekce směru scrollování

var st = $(this).scrollTop();

if (st > lastScrollTop) {

direction = 'down';

} else {

direction = 'up';

}

lastScrollTop = st;

//pokud budu scrolovat dolu element elem se schová, nahoru se objeví

if (direction === 'down') {

$(elem).animate({

opacity: 0

}, {

during: 400

});

} else {

$(elem).animate({

opacity: 1

}, {

during: 400

});

}

});

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:

var lastScrollTop = 0;
var zamceno = false; // zámek pro animaci

$().ready(function() {
// nějaký kód, který se má časem provést…
});
$(window).scroll(function() {
//pokud nebude zamčeno, můžu zavolat animaci
	if (!zamceno) {
//detekce směru scrollování
		var st = $(this).scrollTop();
		if (st > lastScrollTop) {
			direction = 'down';
		} else {
			direction = 'up';
		}
		lastScrollTop = st;
<span style="font-weight: 400;">// pokud budu scrollovat dolů, element elem se schová, nahoru se objeví</span>

		if (direction === 'down') {
			$(elem).animate({
				opacity: 0
			}, {
				during: 400,
				start: function() { // tímto jednoduchým voláním si zamknu animaci
					zamceno = true;
				},
				always: function() { // a tímto zase odemknu po dokončení animace
					zamceno = false;
				}
			});
		} else {
			$(elem).animate({
				opacity: 1
			}, {
				during: 400,
				start: function() { // tímto jednoduchým voláním si zamknu animaci
					zamceno = true;
				},
				always: function() { // a tímto zase odemknu po dokončení animace
					zamceno = false;
				}
			});
		}
	}
});

var lastScrollTop = 0;

var zamceno = false; // zámek pro animaci

$().ready(function() {

// nějaký kód, který se má časem provést…

});

$(window).scroll(function() {

//pokud nebude zamčeno, můžu zavolat animaci

if (!zamceno) {

//detekce směru scrollování

var st = $(this).scrollTop();

if (st > lastScrollTop) {

direction = 'down';

} else {

direction = 'up';

}

lastScrollTop = st;

<span style="font-weight: 400;">// pokud budu scrollovat dolů, element elem se schová, nahoru se objeví</span>

if (direction === 'down') {

$(elem).animate({

opacity: 0

}, {

during: 400,

start: function() { // tímto jednoduchým voláním si zamknu animaci

zamceno = true;

always: function() { // a tímto zase odemknu po dokončení animace

zamceno = false;

}

});

} else {

$(elem).animate({

opacity: 1

}, {

during: 400,

start: function() { // tímto jednoduchým voláním si zamknu animaci

zamceno = true;

always: function() { // a tímto zase odemknu po dokončení animace

zamceno = false;

}

});

}

});