在Fx.Slide实例化之前在元素上近似mootools‘.slide('out')

Question

将var myFx = new Fx.Slide(element);添加到window.addEvent('domready'...)会很简单，但是因为我使用AJAX加载“子页面”，所以这些页面中这些元素的mootools对象需要在完全加载之后实例化。如果我尝试使用domready，将找不到该元素，原因很简单，因为它还不存在。

我已经用setTimeout(function() { ... }, 500);解决了这个问题，但是在页面加载和创建元素效果之间留下了500ms的延迟。

即

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

当页面加载时，在元素转到其默认状态...之前有一个笨重的500ms。呃..。“滑进去了”(滑入？)

不过，对于.hide()和.show()效果，有一种变通方法，因为我可以简单地在html <div id="foo" style="display: none;">中编写

我尝试过用<div id="foo" style="height: 0px; overflow: hidden;">来近似元素的“滑入”状态，但是这个元素永远都是这样隐藏的，而且slide()对它什么也做不了。

我觉得我好像错过了一些简单的东西。

Answer 1

我最终用一个快速的变通方法解决了这个问题(无论如何，我都很满意)。

<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>

元素在初始状态下是隐藏的，slideOut()效果在延迟之后运行，但是用户不会注意到，因为元素是隐藏的。调用时，元素显示设置为block (如果尚未设置)，并调用slideIn()。

Answer 2

您是否尝试过将Fx.Slide实例化放在XHR调用的onComplete方法中？

示例：

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

Answer 3

设置初始状态：

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

然后，当您希望它出现时：

myFx.show().slideIn();