Sexy Opacity Animation with MooTools or jQuery

By  on  
jQuery MooTools Opacity Animation

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.


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

There's nothing too special about the HTML above; the awesomeness comes with 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; }

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

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

		//set opacity ASAP and events
			mouseenter: function() {
			mouseleave: function() {

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;
	//set opacity ASAP and events
	$('.opacity').css('opacity',opacity).hover(function() {
		}, function() {

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

Recent Features

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    WebSocket and Socket.IO

    My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently...

  • By
    CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...


  1. Oh, I like this … very nice!

  2. Wes

    The only downside that I can see about this method is that all children of the div.opacity elements will have the opacity applied to it. I think it would probably be better (in some situations) to have stack two div’s like so:

    <div class="opacity">
    <div class="content">

    Then for the opacity effect, use what you already have. Then in addition, place the content of div.class on top of div.opacity by setting the positioning to relative and then offsetting the top spacing the height of div.opacity. It would be cool to have a javascript snippet that finds the height of div.opacity and then applies it to the offset of div.content.

    Just sharing…I ran into this exact situation recently.

  3. Jeffrey Schrab

    Simple but nice. I have a question though – why is the domready event handler in the Mootools version wrapped in:

    (function($){ ... })(;
  4. Interesting side effect: If you move over two of the divs fast back and forth in the jQuery example nothing happens, in mootools a chain is build and executed. I’d prefer the second.

  5. @Patrick: You got the two mixed up, in the mootools example, nothing happens, but in the jQuery example a chain is built up… I gotta say I prefer the mootools method.

    • Jordan Herrera

      He needs to add .stop() commands before he animates the opacity. That way it will stop all queued animations before it starts a new one, preventing a buildup.

  6. That’s a really nice effect, I like it! Thanks David.

  7. Alex

    @Patrick && @Adriaan
    Mootools uses link:cancel, but jQuery uses something like link:chain like Adriaan correctly says.

  8. Jeferson Koslowski

    @Patrick && @Adriaan && @Alex: You can achieve the same effect as Mootools using jQuery. The only thing u need to do is add stop() before calling an animation method. This will stop any animation running before firing a new one.

    Here is the code with this issue fixed:

    $(document).ready(function() {
        var opacity = 0.7, toOpacity = 0.9, duration = 250;
        //set opacity ASAP and events
        $('.opacity').css('opacity',opacity).hover(function() {
                $(this).stop().fadeTo(duration,toOpacity); // note the stop() method being called
            }, function() {
                $(this).stop().fadeTo(duration,opacity); // note the stop() method being called
  9. Or in CSS3 only :

    .opacity {
    .opacity:hover {
                     -transition-duration: 250ms;
                 -transition-property: opacity;
                     -webkit-transition-duration: 250ms;
                 -webkit-transition-property: opacity; 
                     /* When Gecko will be ready :) */
                     -moz-transition-duration: 250ms;
                 -moz-transition-property: opacity; 
  10. Alex

    @Jeferson Koslowski: Nice one!

  11. Nice one!

    But i got some questions on your example:
    1. why do you use tween(‘opacity’, opacity) ? wouldn’t fade(opacity) be easier?
    2. do both animations have the same duration?
    it would be better to compare if this were so, at this time it seems to me that the jQuery one is faster and for this the mootools example appears to be (maybe it just is) so much smoother, so comparing this two demos for me the mootools (or should i say smoothtools ) example is a clear winner.

  12. good and very useful!

  13. Jeferson Koslowski

    @derschreckliche: I agree with u on the second question. Looks like Mootools has a default of 500ms and the jQuery example is using a duration of 250ms. Thats why Mootools seems smoother than jQuery on this example.

  14. Paadt

    tnx for doing these in both mootools and JQuery! It is much appreciated!!

  15. Not working in Firefox 3.0 or 3.5 / OS X 10.4 (although it works in Safari 4, same OS)

  16. Works for me.

  17. S4l1h

    Hahaha! Good but Not Sexy

  18. You can see a similar effect, though not quite as subtle, on my site at

    Maybe I could get some feedback?

  19. @Patrick DeVivo: Looks good, but that right ad bar bouncing around ensures that I’ll never come back again :) Seriously, stop that thing from moving. I know that I can click to station it, but why make the default annoying? If anything, get rid of the bounce and have it scroll down.

  20. @David Walsh : OK, good point. I have had some complaints about it. The only reason i have it followsing your scrolling is to occupy that otherwise empty “sidebar space” on the right side of the site. I will get rid of the bouncing and hopefully you will come back again :)

  21. @Michael: it’s called “dollar safe mode” – used to be able to use mootools with other frameworks.
    look here:

  22. If you mouse in and out fast a few times the animation keeps going on and off even if the mouse is out.

    Always remember to stop animations! :D

    Nice tutorial.

  23. been a useful effect by using basical knowledge of jquery/mootools

  24. Great tutorial. Thanks!

  25. Thanks for this great tutorial. Really simple and the final outcome is superb!

  26. Pretty neat effect and I have used a similar one in the past!

  27. This does not work in Internet Explorer for me. FF looks great.

  28. when mouse over and read
    can it stay effect 0.9?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!