Header Ads

Header ADS

Animación opacar con Mootools ó jQuery



Interesante 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

No hay comentarios.

Con tecnología de Blogger.