Question

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

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

即

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

当页面加载时，在元素进入默认状态... erm ...“滑入”之前有500毫秒的笨重。（滑入？）

.hide（）和.show（）效果存在变通方法，因为我可以简单地用html <div id="foo" style="display: none;">

写

我已经尝试使用<div id="foo" style="height: 0px; overflow: hidden;">逼近元素的“滑入”状态，但是元素永远保持隐藏状态，而slide（）不会对它做任何该死的事情。

我觉得我错过了一些简单的事情。

Answer 1

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

示例：

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

Answer 2

我最终通过快速解决方法解决了问题（令我满意的，无论如何）。

<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（）效果在延迟后运行，但由于元素被隐藏，用户不会注意到。调用时，元素显示设置为阻止（如果尚未设置），并调用slideIn()。

Answer 3

设置初始状态：

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

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

myFx.show().slideIn();

在Fx.Slide实例化之前对元素上的mootools'.slide（'out'）进行近似

3 个答案: