jQuery: změna průhlednosti při hoveru (changing opacity on hover) | Profi Magazín - webdesign, ikony, jquery, Textpattern

Dnes si ukážeme velmi jednoduchý kus jQuery kódu, který je však poměrně efektně schopen dodat dynamiku do jinak např. statické prezentace. Nejčastěji je používána změna průhlednosti u obrázků, kdy nejprve pomocí jQuery nastavíme výchozí průhlednost, resp. neprůhlednost (opacity) na 0.3 a následně skript při události hover spustí kód, který "zanimuje" průhlednost z výchozí hodnoty 0.3 na 1 (tedy na neprůhlednost) a následně při ukončení hoveru se průhlednost vrátí na zadanou hodnotu. Časový interval si samožrejmě můžete nastavit dle libosti.

$().ready(function() {
	$('#box img').css('opacity', 0.3);
	$('#box img').each(function() {
		$(this).hover(function() {
			$(this).stop().animate({ opacity: 1.0 }, 500);
		},
		function() {
			$(this).stop().animate({ opacity: 0.3 }, 500);
		});
	});
});

Kód je myslím i pro neznalé vcelku slušně čitelný, ale i tak podám lehký výklad.

$('#box img').css('opacity', 0.3) - specifikovaným elementům nastavíme průhlednost na 0.3. Tento zápis by šel pro úsporu zapsat dohromady s následným kódem, ale pro jednodušší pochopení jsem to odělil.

$('#box img').each() - tento selektor spolu s funkcí each() zajistí, že následující kód se aplikuje na všechny elementy img, tedy obrázky, které jsou uvnitř divu s id box.

Funkci hover() jsem již popisoval v samotném článku jQuery: Aplikace pseudotřídy hover na cokoliv.

$(this) - je zástupný objekt pro specifikovaný element (více o $(this) v samostatném článku).

stop() - zastaví veškeré animace na specifikovaném elementu. Důvod aplikace je ten, aby se nám při řetěžení hover události neřetězila samotná následná animace se změnou průhlednosti. Pro bližší pochopení jsem v příkladu v druhé části odstranil tuto funkci - ostatně vyzkoušejte si sami přejíždět přes obrázky sem a tam a hned pochopíte nezbytnost této funkce v tomto kódu.

animate({ opacity: 1.0 }, 500) - v této funkci jako první argument předáváme hodnoty, na kterých má animace elementu skončit. Druhým parametrem je pak časový interval animace v milisekundách. Více o celé funkci animate rozeberu v příštím článku, neboť s touto funkcí jdou dělat psí kusy.

Na funkční příklad se můžete nyní podívat na samostatné stránce.