Блог

Было бы просто добавить 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>
  

При загрузке страницы проходит 500 мс, прежде чем элемент переходит в состояние по умолчанию … э-э … «вставлен». (вставлен?)

Однако для эффектов .hide() и .show() существует обходной путь, поскольку я могу просто написать в html <div id="foo" style="display: none;">

Я пытался аппроксимировать состояние элемента «slided in» с помощью <div id="foo" style="height: 0px; overflow: hidden;"> , но тогда элемент остается скрытым навсегда, и slide () ни черта с ним не делает.

Я чувствую, как будто я упускаю что-то простое.

Вы пробовали поместить создание экземпляра Fx.Slide в метод onComplete вашего вызова XHR?

Пример :

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

В итоге я решил (по крайней мере, к своему удовлетворению) проблему быстрым обходным путем.

 <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() вызывается.

Установить начальное состояние:

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

Затем позже, когда вы захотите, чтобы он появился:

 myFx.show().slideIn();