好的,所以我有一个运行 Joomla 的站点,它使用的是 mootools 1.11 框架。我已经使用 mootools 1.2 框架中的示例将它的工作版本拼凑在一起,但即使在兼容层的情况下也无法使两者共存,而不会破坏 Joomla 站点中的其他模块。
问题 我有几个带有“.box_panel”类的 div,我有它,以便它们在鼠标悬停时从 50% 不透明度变为鼠标离开时的 100% 不透明度。我遇到的问题是将它们设置为 50% onload 的代码是什么?
在 mootools 1.2 中,我使用了:
<body onload="$$('div.box_panel').fade(0.5);">
我用于鼠标悬停/鼠标离开效果的代码是:
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); });
});
});