我在页面中有几个div，它们包含简单的HTML和图像。每个div都有独特的ID。
我喜欢它，以便当页面加载div的内容时，可以说是60％，但是在鼠标悬停时，淡入淡出为100％。在mouseout上，他们将回到60％。
该网站是在Joomla 1.5.x中构建的，因此已经加载了mootools 1.11库。我正在寻找网上的示例代码，并找到了许多用于使用jQuery淡化图像的不透明度的参考，但对于mootools来说并不是那么多。
任何指针将不胜感激:)
你可以将图像包装成div并使用这样的东西来淡化？
Fx.Style("div1", "opacity").start(1.0);
找到了解决方案，很好。它适用于mootools 1.2.1。我已经调整了代码以淡化div而不是img。
我把它放在脑海里：
<script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script>
<script type="text/javascript">
var fade_in = 1;
var fade_out = 0.5;
</script>
</head>
<body onload="$$('div.box_panel').fade(0.5);">
然后在我的div上。
<div id="box1" class="box_panel" onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);">
<h2>Box One</h2>
<p>This is a content box and some sample content to pad it out.</p>
</div>
现在的问题是我不确定如何在1.11中获得同样的效果
请改为使用CSS3过渡。它简单得多。见（http://www.w3schools.com/css/css3_transitions.asp）
div.box_panel {
opacity: 0.6;
filter: alpha(opacity=60);
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
-ms-transition: opacity .5s linear;
-o-transition: opacity .5s linear;
transition: opacity .5s linear;
}
div.box_panel:hover {
opacity: 1;
filter: alpha(opacity=100);
}