A big part of the sexiness that is Apple software is Apple’s use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I’ve put together an example of a sexy opacity animation technique which you may implement in jQuery or MooTools.

The 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>

There’s nothing too special about the HTML above; the awesomeness comes with CSS.

The CSS

#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; }

To enhance the design of my content block, I’m adding a colorful background image behind where the content blocks will display. To increase the sexiness, I’ve added rounded corners to the DIV elements.

The MooTools JavaScript

(function($){
	window.addEvent('domready',function() {
		
		var opacity = 0.7, toOpacity = 0.9;

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

The structure for both the jQuery version and MooTools version is the same. Once the DOM is ready, we immediately set the opacity of the child elements to the lighter opacity. We then add mouseenter and mouseleave events to the child elements that animate the opacity.

The jQuery JavaScript

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

Bring the sexy back with jQuery or MooTools and element opacity animation!