При загрузке установите непрозрачность div на 50%

Итак, у меня есть сайт под управлением Joomla, и он использует фреймворк mootools 1.11. Я собрал рабочую версию этого, используя примеры из фреймворка mootools 1.2, но не могу заставить их сосуществовать даже со слоем совместимости, не нарушая другие модули на сайте Joomla.

Вопрос У меня есть пара элементов div с классом ".box_panel", и у меня так, что они при наведении мыши переходят от непрозрачности 50 % и обратно к непрозрачности 100 % при выходе из мыши. Проблема, с которой я сталкиваюсь, заключается в том, что это за код, чтобы установить их на 50% загрузки?

В mootools 1.2 я использовал:

<body onload="$$('div.box_panel').fade(0.5);">

Код, который я использую для эффектов mouseover/mouseleave:

window.addEvent('domready',function() { 
    //first, apply a class to each of your menu element
    //$$('.links') puts every element wearing the .links class into an array
    //$$('.links').each is to browse the array an apply a function to... each of them
    $$('.box_panel').each(function(el, i) {
        //there comes exactly your former fx statement except for
        var ExampleFx = new Fx.Style(el, 'opacity', { //the fact i apply the effect on el
            wait: false, //and wait: false which make the effect not waiting (very useful on the mouseout or mouseleave function...
            opacity: 0.5,
            duration: 500,
            transition: Fx.Transitions.Quart.easeInOut
        });
        //and there i apply (always on el) the effect on mouseenter (similar in this case but often better than mouseover)
        //and mouseleave (same for mouseenter but concerning mouesout)
        el.addEvent('mouseleave', function() { ExampleFx.start(1, 0.5); });
        el.addEvent('mouseenter', function() { ExampleFx.start(0.5, 1); });

    });
});

opacity mouseover onload fade mootools
person Community    schedule 08.04.2009    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Нельзя ли просто добавить ExampleFx.start(1, 0.5); перед последними скобками (после оператора $$('.box_panel')...)?

person Mladen Mihajlovic    schedule 08.04.2009
comment
Спасибо за это, я попробую. - person ; 08.04.2009
comment
Я безуспешно пробовал после оператора, как показано ниже: $$('.box_panel').each(function(el, i) { ExampleFx.start(1, 0.5); Думая об этом, я мог бы просто использовать свойства CSS, чтобы установить непрозрачность .box_panel. - person ; 08.04.2009

arrow_upward
0
arrow_downward

Просто:

$$('.box_panel').effect('opacity', 0.5);
// run this right after your window.addEvent('domready', function() {

Редактировать: здесь я немного ошибся. Младен Михайлович ответил совершенно правильно. Кроме того, вот несколько ссылок для вас:

person moff    schedule 08.04.2009