Sexy animace krytí s MooTools nebo jQuery

Velkou část sexismu, který je softwarem Apple, spočívá v tom, že Apple používá neprůhlednost. Jako zdánlivě každá jiná technika uživatelského rozhraní Apple musí být přenesena na web (). Dal jsem dohromady příklad sexy techniky neprůhledné animace, kterou můžete implementovat v jQuery nebo MooTools.

XHTML

<div id="forest-slot-1" class="opacity">
	<h2>The Forest</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ipsum at est condimentum sed ultricies turpis pellentesque. Proin scelerisque malesuada erat, id sagittis enim auctor vitae. Sed eget nisl ipsum, quis eleifend lacus. Aenean at erat nulla, id semper velit.</p>
</div>
<div id="forest-slot-2" class="opacity">
	<h2>The Jungle</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ipsum at est condimentum sed ultricies turpis pellentesque. Proin scelerisque malesuada erat, id sagittis enim auctor vitae.</p>
</div>
<div id="forest-slot-3" class="opacity">
	<h2>The Wildlife</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ipsum at est condimentum sed ultricies turpis pellentesque. Proin scelerisque malesuada erat, id sagittis enim auctor vitae.</p>
</div>

Na výše uvedeném HTML není nic zvláštního; úžasnost přichází s CSS.

CSS

/* all css is specific to THIS example */
#forest		{ width:800px; height:360px; position:relative; background:url(forest.jpg) 0 bottom no-repeat; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
.opacity	{ background:#fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; padding:20px; }
#forest-slot-1	{ height:260px; position:absolute; top:20px; left:20px; width:340px; }
#forest-slot-2	{ height:100px; position:absolute; top:20px; right:20px; width:310px; }
#forest-slot-3	{ height:100px; position:absolute; top:180px; right:20px; width:310px; }

Abych vylepšil design svého bloku obsahu, přidávám barevný obrázek na pozadí, kde se budou bloky obsahu zobrazovat. Abych zvýšil půvab, přidal jsem k prvkům DIV zaoblené rohy.

JavaScript MooTools

(function($){
	window.addEvent('domready',function() {
		//element collection and settings
		var opacity = 0.7, toOpacity = 0.9;

		//set opacity ASAP and events
		$$('div.opacity').set('opacity',opacity).addEvents({
			mouseenter: function() {
				this.tween('opacity',toOpacity);
			},
			mouseleave: function() {
				this.tween('opacity',opacity);
			}
		});
	});
})(document.id);

Struktura verze jQuery i verze MooTools je stejná. Jakmile je DOM připraven, okamžitě nastavíme krytí podřízených prvků na světlejší krytí. Poté přidáme mouseenter a mouseleave události do podřízených prvků, které animují neprůhlednost.

JavaScript jQuery

$(document).ready(function() {
	//settings
	var opacity = 0.7, toOpacity = 0.9, duration = 250;
	//set opacity ASAP and events
	$('.opacity').css('opacity',opacity).hover(function() {
			$(this).fadeTo(duration,toOpacity);
		}, function() {
			$(this).fadeTo(duration,opacity);
		}
	);
});

Vraťte sexy zpět pomocí jQuery nebo MooTools a animace neprůhlednosti prvků!