Sexy Opacity Animation with MooTools or jQuery

Discussion

1. David Horn

   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>
   <div class="content">
      ...
   </div>
   

   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($){ ... })(document.id);
   
4. David Walsh

   @Jeffrey Schrab: Check this out: http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/
5. Patrick

   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.
6. Adriaan

   @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.
7. Tim Wright

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

   @Patrick && @Adriaan
   Mootools uses link:cancel, but jQuery uses something like link:chain like Adriaan correctly says.
9. 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() {
       //settings
       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
           }
       );
   });
   
10. FGRibreau

    Or in CSS3 only :

    .opacity {
                opacity:0.7
    }
    
    .opacity:hover {
                         opacity:1;
    
                     -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; 
    
    
    }
    
11. Alex

    @Jeferson Koslowski: Nice one!
12. derschreckliche

    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.
13. nice

    good and very useful!
    10x
14. 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.
15. Paadt

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

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

    Works for me.
18. S4l1h

    Hahaha! Good but Not Sexy
19. Patrick DeVivo

    You can see a similar effect, though not quite as subtle, on my site at http://pulseblogger.com

    Maybe I could get some feedback?
20. David Walsh

    @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.
21. Patrick DeVivo

    @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 :)
22. derschreckliche

    @Michael: it’s called “dollar safe mode” – used to be able to use mootools with other frameworks.
    look here:
    http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/
23. ozzysong

    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.
24. Shitic

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

    Great tutorial. Thanks!
26. wynajem

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

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

    This does not work in Internet Explorer for me. FF looks great.
29. 羽傳茶業

    when mouse over and read
    can it stay effect 0.9?