Mootools: Fading zwischen Divs im Menü

Question

Ich habe ein Menü mit auf der linken Seite 4 <li> Elemente, und auf der rechten Seite gibt es 4 Divs, eins pro Element, und die Eingabe eines Elements mit der Maus sollte eine der divs anzeigen . so etwas wie

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

wo showDiv (id) ein div zeigt und verbirgt die andere div.

Die divs:

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

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

Der Code addEvent usw. funktioniert, werde ich es hier nicht einfügen. Die ausgeführte Funktion ist showDiv ("div id"); .

Ich kann das Problem nicht finden. Kannst du mir sagen, wie es funktioniert oder zumindest eine einfachere Möglichkeit, die divs zu verblassen?

(Mootools funktioniert, ich bin mit Joomla)

Answer 1

Es gibt viele Fehler im Code sind. Ich habe versucht, ein kleines Beispiel zu geben, das Ihnen hilft, das Problem zu verstehen und leicht eine Lösung zu finden. Hoffe es hilft!

http://goo.gl/TzlSt

Wenn Sie irgendwelche Zweifel haben, zögern Sie nicht mich fragen;)