Animación opacar con Mootools ó jQuery

Animación opacarInteresante animación de opacar cierto contenedor cuando posamos el cursor sobre este. Se lograda con cualquiera de estas librerías: Mootools ó jQuery.

Mootools (Demo con 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);

jQuery (Demo con 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);
                }
        );
});

Enlace | Implementación

Leave a Reply

Your email address will not be published. Required fields are marked *

Proudly powered by WordPress | Theme: Wanderz Blog by Crimson Themes.