Vyblednutí prvku ve stylu Google pomocí MooTools nebo jQuery

Google nedávno zavedl na svou domovskou stránku zajímavý efekt:navigační položky vlevo a vpravo nahoře se nezobrazují, dokud nepohnete myší nebo neopustíte pole pro hledaný výraz. Proč? Mohu jen spekulovat, že chtějí svou domovskou stránku co nejjednodušší; Koneckonců, vyhledávací pole se okamžitě zaměří a nejméně polovina jejich uživatelů pravděpodobně jen zadá svůj výraz a stiskne klávesu Enter – není třeba dalšího nepořádku. Zde je návod, jak můžete implementovat podobný systém pomocí MooTools nebo jQuery.

Zobrazit MooTools DemoView jQuery Demo

HTML

<body>
	<div id="fade1" class="fadein">{ fade area 1 }</div>
	<div id="fade2" class="fadein">{ fade area 2 }</div>
	<div id="fade3" class="fadein">{ fade area 3 }</div>
	<!-- other stuff here -->
</body>

Umístěte HTML, kam chcete – nemá to žádný vliv na náš systém, kromě toho, že každý prvek musí mít třídu CSS fadein.

CSS

@media all {
	.fadein	{ visibility:hidden; }
	#fade1	{ /* place wherever on the page */ }
	#fade2	{ /* place wherever on the page */ }
	#fade3	{ /* place wherever on the page */ }
}
@media handheld {
	.fadein	{ visibility:visible; }
}

U prvků, které budou mizet, bude třeba nastavit viditelnost na skryté. Níže se přizpůsobíme uživateli bez JavaScriptu.

JavaScript MooTools

/* via @appden, Scott Kyle, http://appden.com/javascript/fun-with-custom-events-on-elements-in-mootools/ */
Native.implement([Element, Window, Document, Events], {
	oneEvent: function(type, fn) {
		return this.addEvent(type, function() {
			this.removeEvent(type, arguments.callee);
			return fn.apply(this, arguments);
		});
	}
});

/* make it happen! */
window.addEvent('domready',function() {
	var fades = $$('.fadein').setStyle('opacity',0);
	var doFadeIn = function(e) {
		if(!e.key || e.key == 'tab') {
			fades.fade('in');
		}
	};
	$(document.body).oneEvent('mousemove',doFadeIn);
	$('s').oneEvent('blur',doFadeIn);
});

Když je DOM připraven, chopíme se všech prvků, které mají vniknout a...získáme toto...vstoupíme.

JavaScript jQuery

$(document).ready(function() {
	var doFadeIn = function() {
		$('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1);
	};
	$('body').one('mousemove',doFadeIn);
	$('#s').one('blur',doFadeIn);
});

Toto je ekvivalentní kód JavaScriptu jQuery.

Vstřícné pro uživatele bez JavaScriptu

<noscript>
	<style type="text/css">
		.fadein	{ visibility:visible; }
	</style>
</noscript>

Zrušíme počáteční skrytí prvků. Hurá.

Zobrazit MooTools DemoView jQuery Demo

Je to jemný efekt, ale ze strany Googlu je to dobrý nápad.