webrebel html css javascript laravel oop php mysql wordpress kurz

Yellow fade efekt v jQuery [video]

napísal , 11 Oct 2010 [ jQuery Tutoriály Videá ]

Čo najčastejšie vidíte po úprave profilu? Správu typu "Váš profil bol úspešne upravený". V dnešnej dobe preplnených stránok je ale často problém všimnúť si už len túto správu, nie ešte práve upravený element, na ktorý sa správa vzťahuje.

Yellow fade technika od 37signals proti tomu bojuje šikovným spôsobom - element sa cez JavaScript zvýrazní žltou farbou, ktorá postupne zmizne. To zaručene získa pozornosť a človek hneď vie, na čom je. Like this:

Video ukazuje a vysvetľuje implementáciu yellow fade efektu na stránke, na ktorej práve makáme. Používame jQuery a ideme na to bez pluginov a dodatočných súborov. Riešenie možno nie je ideálne (ani univerzálne), rozhodne je však dostatočne obskúrne a tým pádom hodné podelenia o :) Ostatne pointou týchto videí je predstaviť užitočné koncepty a ukázať veci, ktoré ste (nielen) o jQuery možno nevedeli.

Ako vždy, kód si môžete stiahnuť a robiť s ním čo len chcete:

var pid = window.location.hash;

if (pid)
{
	var post = $(pid);
	
	post.css({ position: 'relative' });
	post.children().css({ position: 'relative', zIndex: 1 });
	
	$('<div/>', {
		css: {
			backgroundColor: '#FEFF9F',
			width: post.outerWidth(),
			height: post.outerHeight(),
			position: 'absolute',
			left: 0,
			top: 0,
			zIndex: 0
		},
		html: ' '
	}).appendTo(post).stop().delay(1250).fadeOut(500);
}

A tu je spomínaný Color Animations plugin od Johna Resiga. John Resig je autor samotnej jQuery knižnice, mimochodom.

napísal , 11 Oct 2010

čo ty na to?

komentuj