Approximating a mootools' .slide('out') on an element prior to Fx.Slide instantiation

问题

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.

回答1:

Have you tried putting the Fx.Slide instantiation in the onComplete method of your XHR call ?

Example :

var myRequest = new Request({
    method: 'get', 
    url: 'requestHandler.php',
    onComplete : function() {
        var myFx = new Fx.Slide(element);
        // etc ...
    }
});

回答2:

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.

回答3:

Set initial state:

var myFx = new Fx.Slide('foo').hide();

Then later, when you want it to appear:

myFx.show().slideIn();

来源：https://stackoverflow.com/questions/5760944/approximating-a-mootools-slideout-on-an-element-prior-to-fx-slide-instanti

标签

ajax

mootools