Geek Answers Handbook

How can I hide a hidden element using Mootools

I am trying to fade in a hidden element and then fade out again using mootools.

I can't just use $('my_div').fade('toggle') because it assumes the element is always visible, while my div starts with display:none .

Is there an easy way to combine fade inputs / outputs with a slide in / out or in some other way to achieve a good effect?

+6
javascript mootools
source share
5 answers

I almost always use Fx.Reveal in Mootools.More:

http://mootools.net/docs/more/Fx/Fx.Reveal

Very nice animation of the attenuation, almost no effort on your part. Fx.Slide can also do the trick, although it tends to be more uncomfortable.

If you do not want to use Mootools.More, then with Fx.Morph you can flip your own solution in order to change the height and opacity at the same time.

+5
source share

I prefer to use display: none . You can simply use this code if you want to preempt an element:

Fade in:

 $('my_div').setStyle('display', 'block'); $('my_div').fade('in');

and disappear:

 $('my_div').fade('out'); $('my_div').setStyle('display', 'none');

Alternatively, you can simply set up a class called .hide with display: none installed in it and put that class in your element to start with. Then it makes the code simpler:

 $('my_div').toggleClass('hide'); $('my_div').fade('toggle');
+4
source share

Start with opacity: 0 and display: block. This way you can use fade ()

+1
source share

I do this: I do not hide the element from CSS (if you used "display: none" or "visibility: hidden", remove them before trying what I suggest). Instead, in "domready", I use "fade ('hide')" to hide the element. That way, I can later apply "fade ('in')" and "fade ('out')" to it.

+1
source share

While you can use More to highlight an element, using a delay or chain is not difficult.
Here's the fiddle: http://jsfiddle.net/kLn77n6t/2/

Method # 1:

 function inout(el){ el.fade('in').fade.delay(1000, el, 'out'); } inout($('fader'));

(We pass the delay () element, because otherwise it does not know what "this" is.)

Method # 2:

Same as before, but using CSS classes to set the attenuation properties and add and remove a class:

 <style> #fader{opacity:0; transition:opacity 0.5s ease;} #fader.show{opacity:1} </style> <script> function inout(el){ el.addClass('show').removeClass.delay(1000, el, 'show'); } inout($('fader')); </script>

Method 3:

The "right" method should be in a chain of teenagers, but I have not tried.
If you need it, write a comment. The Hacky chain does not work:

 $('fader').set('tween', {duration:'long', link: 'chain'}); function inout(){ $('fader').tween('opacity',1).tween('opacity',0); }

Good luck

+1
source share

More articles:


All Articles