Mootools：菜单中的 div 之间的淡入淡出

Question

我有一个菜单，左边有 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：

<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>

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);
}

addEvent 等代码有效，这里就不贴了。执行的函数是 showDiv("div id"); .

我找不到问题。你能告诉我如何让它工作，或者至少是一种更简单的淡化 div 的方法吗？

（Mootools 有效，我正在使用 Joomla）

Answer 1

您的代码中有很多错误。 我试图做一个小例子来帮助你理解问题并轻松找到解决方案。 希望对您有所帮助！

http://goo.gl/TzlSt

如果您有任何疑问，请随时问我;）