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


jQuery: změna průhlednosti při hoveru (changing opacity on hover)

Jiří Melčák | 28. září 2009 | 54 944× zobrazeno | 8 komentářů
Hodnocení: 4.2 (13 hlasů)

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.

$(function() {
	$('#box img').css('opacity', 0.3);
	$('#box img')
		.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.

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.

Komentáře

Radoslav Holan
16. říjen 2009, 16:46

Vřele doporučuji, sám jeden z hover pluginů pod jQuery používám a za ten efekt to rozhodně stojí. Ono totiž každého hned trkne, že to jde nějak “měkce”. Nestojí to nic a vypadá to opravdu luxusně.

Michal Novotny
2. únor 2010, 08:31

Vypadá to pěkně, ale tohle je použití u <img />, ale dá se to použít i například na <div> s background-image?

Redaktor ovsem.netAutor článku Jiří Melčák
2. únor 2010, 09:29

Michal: Ano, lze to použít na cokoliv, stačí jen změnit selektor.

Michal
20. červen 2010, 12:09

Díky, jednoduché a efektní.

Jakub Hejda
22. červen 2010, 14:04

To je SUPR!

niobi
14. říjen 2010, 18:18

zdravím, u posledního příkladu hover na opacity jsem nejak nerozpoznal rozdíl s parametrem stop a bez něj … mohl by mě někto trknout, jaký je rozdíl ?

Redaktor ovsem.netAutor článku Jiří Melčák
14. říjen 2010, 18:35

Rozdíl je pozorovatelný, když u spodního příkladu začneš zběsila lítat myší nad obrázky.

Paul
23. květen 2012, 22:04

Tento web mám čím dál raději, ikdyž jsem ho našel nedávno. Super, toto jsem nedávno bezúspěšně hledal a hned využiju.

Komentáře jsou uzavřeny

Pracovní projekty

Bleskovky

Kniha: jQuery Kuchařka programátora

Kniha: jQuery Kuchařka programátora

Rád bych upozornil na zajímavou knihu, o kterou jsem zavadil. Jedná se o knihu s názvem jQuery Kuchařka programátora a je tedy zřejmé, co bude jejím obsahem. Nemá moc smysl cokoliv popisovat. Raději hned mrkněte do obsahu kapitol nebo zkoukněte ukázkovou kapitolu v PDF. Běžná cena je 590 Kč. Momentálně ji můžete online koupit za 502 Kč.

Textpattern.com redesignoval web

Textpattern

Oficiální stránky mého oblíbeného CMS Textpattern prošly redesignem - www.textpattern.com. Ještě je potřeba kompletně redesignovat celý výchozí admin a mohl by se Textpattern lehce vrátit na výsluní. Poslední verze Textpattern 4.2.0 sice podporuje skiny pro admin, ale abych byl upřímný, tak drtivá většina nestojí ani za stažení. Budu muset dodělat tu svou představu o adminu Textpatternu.

Guide to CSS support in e-mail clients

Guide to CSS support in e-mail clients

Tvorba HTML e-mailu rozesíláného především v podobě newsletteru představuje občas nemalé trápení a ladění, aby e-mail vypadal přesně tak, jak chcete nebo jak jste zamýšleli. Na serveru campaignmonitor.com jsou k dispozici tabulky (i ke stažení v PDF, ZIP) s podporou CSS selektorů a vlastností, které lze v nejpoužívanějších e-mailových klientech bezpečně používat.

Fascinující pohled na svět

The Big Picture

Na serveru Boston.com můžete v kategorii The Big Picture vidět fotografie zachycující atmosféru různých zemí, národností, přírodních jevů i katastrof, politiku, válku atd..

Vývoj produktů Apple v letech 1977-2008

Vývoj produktů Apple

Zajímavou podívanou vám nabídne článek, který shrnuje vývoj výrobků Apple, od stolních počítačů přes notebooky, až po jednotlivé periferie jako klávesnice a myš.

Zobrazit další bleskovky »

O všem na internetu