Хорошо, у меня есть сайт под управлением 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); });
});
});