Question

It’d be simple to add var myFx = new Fx.Slide(element); to window.addEvent('domready'...), but because I am loading “sub-pages” using AJAX, the mootools objects of these elements inside these pages need to be instantiated after have loaded fully. If I tried using domready, the element would not be found, simple because it doesn’t exist yet.

I’ve been working around this with setTimeout(function() { ... }, 500);, but this leaves a 500ms delay between page load and element effect creation.

i.e.

<div id="foo">TextTextText</div>
<script type="text/javascript">
    setTimeout(function() {
        var myFx = new Fx.Slide('foo').slideOut();
    }, 500);
</script>

When the page is loaded, there is a clunky 500 ms before the element goes to its default state of… erm… “slided in”. (slidded in?)

A workaround exists for .hide() and .show() effects, though, since I can simply write in the html <div id="foo" style="display: none;">

I’ve tried approximating the “slid in” state of an element with <div id="foo" style="height: 0px; overflow: hidden;">, but then the element stays hidden like that forever, and slide() doesn’t do a damn thing on it.

I feel as though I am missing something simple.

Answer 1

I ended up resolving (to my satisfaction, anyway) the problem with a quick workaround.

<div id="foo" style="display: none;">TextTextText</div>
<a href="#" id="toggler">Click me!</a>
<script type="text/javascript">
    setTimeout(function() {
        var myFx = new Fx.Slide('foo').slideOut();
        $('toggler').addEvent('click', function() {
            if ($('foo').getStyle('display') == 'none') $('foo').setStyle('display', 'block');
            myFx.slideIn();
        });
    }, 500);
</script>

Element is hidden in initial state, and the slideOut() effect is run after the delay, but user won’t notice since element is hidden. When called, element display is set to block (if not set already), and slideIn() is called.