Animazione opacit

CODICE HTML

The Forest

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.

The Jungle

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.

The Wildlife

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.

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

CODICE JAVASCRIPT

$(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);
}
);
});