evelio.blog();

Basado en dos artículos de David Walsh (lectura obligada y recomendada):

• Implementing Basic and Fancy Show/Hide in MooTools 1.2
• MooTools Gone Wild: Element Flashing

por cierto gracias!! n_n

He agregado estas funcionalidades a mi «core» de MooTools:

/*
Script: Flash-ShowAndHide.js
An Element extension which allows flash, show and hide (and with fade) an element.

License:
MIT-style license.
*/

Element.implement
({
hide:function()
{
this.setStyle(‘display’, ‘none’);
return this;
},
show:function()
{
this.setStyle(‘display’, »);
return this;
},
isVisible:function()
{
return this.getStyle(‘display’ ) != ‘none’ ;
},
toggleVisibility:function()
{
this.isVisible() ? this.hide() : this.show();
},
hideFade:function()
{
var el=this;
el.fade(‘out’).get(‘tween’).addEvent(‘complete’, function(){el.hide();});
return this;
},
showFade:function()
{
var el=this;
el.show();
this.fade(‘in’).get(‘tween’).addEvent(‘complete’, function(){el.show();});
return this;
},
toggleVisibilityFade:function()
{
this.isVisible() ? this.hideFade() : this.showFade();
},

flash:function(prop, from, to, reps, dur)
{
if(!reps) { reps = 1; }
if(!prop) { prop = ‘background-color’; }
if(!dur) { dur = 250; }
var tween = this.get(‘tween’,{duration: dur, link: ‘chain’});
for(i=1; i<=reps; i++) { tween.start(prop,from,to).start(prop,to,from); } return tween; } });[/sourcecode] Las diferencia frente a las de David son sutiles pero las recalco:

Element.flash(…)

«No«* crea una nueva instancia de Fx.Tween en cada llamada, en su lugar usa Element.tween de MooTools, con esto se logra que al llamar Element.flash(…) cancele el flash anterior y ejecute recién llamado, a diferencia del de David que cuando se llama varias veces ejecuta cada flash lo más rapidamente… además en última instancia returna el efecto para poder encadenarle con chain(…), cuando el efecto finalize.

* En realidad lo recrea dentro de Element (ver Notas de documentación):

When options are passed to either the setter or the getter, the instance will be recreated.

En últimas me parece más optimo

Element.hide() y Element.show()

La única diferencia es que retorna el elemento para poder encadenar fácilmente.

Element.isVisible() y Element.toggleVisibility()

Se agregan estas funciones simples pero útiles.

Element.hideFade(), Element.showFade() y Element.toggleVisibilityFade()

Frente a Element.fancyShow() y Element.fancyHide() de David es que estas realmente las ocultan y las muestran.

me explico, Element.fancyHide() pone la opacidad de Element a 0 con Element.fade(‘out’) y nada más frente a Element.hideFade() que además de esto realmente lo oculta al llamar Element.hide() al terminar el efecto fade, de la misma forma Element.showFade() también realmente muestra el elemento 😛

Al hacer esto, nos permite realmente saber si el elemento es visible o no con Element.isVisible() además podemos alternar la visibilidad con efecto de desvanecimiento con Element.toggleVisibilityFade().

Eso es todo lo que extendí u optimice al código de David.