Publicado por evelio hace 1771 dias, en: Desarrollo, Web.
Basado en dos artículos de David Walsh (lectura obligada y recomendada):
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; } });
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.
-
shakaran el agosto 13, 2008 a las 6:51 am
Bastante útil, aunque no entiendo muy bien la necesidad de retornar el elemento en algunos métodos como hide() (me refiero al return this).
Aunque supongo que tendrá su explicación.
-
Evelio el agosto 14, 2008 a las 11:00 am
lo de return this; es para poder encadenar es decir que pueda hacer algo similar a esto:
[sourcecode language='jscript']var el=$(‘someElement’);
el.hideFade().showFade().flash(‘border-color’, ‘#000′, ‘#fff’, 3, 750)[/sourcecode]
Nota: el código se puede optimizar aún más
un saludo
