Аппроксимация mootools '.slide (' out ') для элемента до создания экземпляра Fx.Slide - PullRequest
Новая
       20

Аппроксимация mootools '.slide (' out ') для элемента до создания экземпляра Fx.Slide

0 голосов
/ 23 апреля 2011

Было бы просто добавить 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 мс неуклюже перед тем, как элемент переходит в состояние по умолчанию ... erm ... "slideв".(добавлено?)

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

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

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

Ответы [ 3 ]

0 голосов
/ 23 апреля 2011

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

<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().

0 голосов
/ 06 июня 2012

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

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

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

myFx.show().slideIn();
0 голосов
/ 23 апреля 2011

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

Пример: 

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