Javascript Mootools:在菜单中的div之间淡入淡出

我有一个菜单，左边有4个

项，右边有4个div，每个项一个，用鼠标输入一个项应该显示其中一个div。 差不多

<ul><li onmouseover="javascript:showDiv("div1");">one</li><li  onmouseover="javascript:showDiv("div2");">two</li>(4 li)</ul>

一个两个 其中showDiv（id）显示一个div并隐藏另一个div

各分区：

<div id="menu1">menu1</div>
<div id="menu2" style="display:none;">menu2</div>
<div id="menu3" style="display:none;">menu3</div>
<div id="menu4" style="display:none;">menu4</div>

menu1
菜单2
菜单3
菜单4

Javascript代码：

function fadeBetweenDivs( div1, div2 ) {
 $$( div1 ).fade( "out" );
 (function(){
  $$( div1 ).setStyles({
   display: 'none',
   opacity: 0
  });
 }).delay( 150 );
 (function(){
  $( div2 ).setStyles({
   display: 'block',
   opacity: 0
  });
 }).delay( 150 );
 $$( div2 ).fade( "in" );
}
function findDiv() {
 var arrayDiv = ["menu1","menu2","menu3","menu4"];
 for (i=0;i<arrayDiv.length;i++) {
  var blockDiv = document.getElementById(arrayDiv[i]).style.display;
  if (blockDiv = "block") {
   var viewedDiv = arrayDiv[i];
   return viewedDiv;
  }
 }
}
function showDiv(showdiv) {
 var hidediv = findDiv();
 fadeBetweenDivs(hidediv,showdiv);
}

函数fadeBetweenDivs（第1部分，第2部分）{
$$（第1部分）。淡出（“淡出”）；
（功能（）{
$$（第1部分）.设置样式({
显示：“无”，
不透明度：0
});
}).延迟（150）；
（功能（）{
$（第2部分）.setStyles({
显示：“块”，
不透明度：0
});
}).延迟（150）；
$$（第2部分）.淡入（“淡入”）；
}
函数findDiv（）{
var arrayDiv=[“menu1”、“menu2”、“menu3”、“menu4”]；
对于（i=0；i，代码中有很多错误。
我试着做一个小例子来帮助你理解这个问题，并轻松找到解决方案。
希望有帮助


如果您有任何疑问，请随时问我；）
$$（'.menu'）.fade（0.setStyle（'display'，'none'）；
-fade是异步的，不能像这样链接，它会有效地隐藏它，然后在淡入到0之间，但不会让用户看到。使用
el.set（“tween'，{onComplete:function（）{this.element.setStyle（“display”，“none”）；}）.fade（“0”）；
-尽管在执行其他tween（如淡入）之前需要
el.get（“tween”）.removeEvents（）；
。此外，您应该缓存选择器-对于大数据集和旧浏览器来说，这可能非常缓慢/无效。这是针对1.2的，而不是joomla 1.5（除非自定义）是的，Dimitar！这只是一个简单的例子，让Ken知道解决这个问题的方法！感谢让我和他知道代码可以改进的方法。顺便说一下，我知道淡入淡出，但这只是一种“重置”不透明度的方法，通过执行setStyle（'opacity'，0）也一样。为了让用户看到效果，可以通过链接Fx.Morph来实现另一种方式。我也同意您关于缓存的看法。。当我有5分钟的时间时，我会修复代码；）我知道您知道这一点，但提出问题的人或将查看解决方案的人可能不知道。：）