Mootools：菜單中的div之間的淡入淡出

我有一個左側菜單4 <li>項目，右側有4個div，每個項目一個，用鼠標輸入項目應顯示其中一個div 。像Mootools：菜單中的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>

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」）; 。

我找不到問題。你能告訴我如何使其工作或至少一個簡單的方法來淡化分區？

（Mootools的作品，我使用Joomla）

來源

2011-01-08 Ken

有你的代碼中的錯誤很多。我試着做一個小例子來幫助您理解問題並輕鬆找到解決方案。希望它有幫助！

http://goo.gl/TzlSt

如果您有任何疑問，請隨時問我;）

來源

2011-01-10 09:11:36 stecb

$$（ '菜單。 '）淡出（0）.setStyle（' 顯示'， '無'。）;` - 淡入淡出是異步的，不能像這樣鏈接，它會有效地隱藏它由於顯示，然後補間淡化爲0，但不是讓用戶可以看到。使用`el.set（「tween」，{onComplete：function（）{this.element.setStyle（「display」，「none」）;}）。fade（「0」）;` - 儘管你需要'el .get（「tween」）。removeEvents（）;`在執行其他漸變之前，你應該緩存選擇器 - 這對於大型數據集和舊瀏覽器來說可能非常緩慢/無效。附：這是爲1.2所以不是joomla 1.5（除非定製） – 2011-01-10 18:19:46

Mootools：菜單中的div之間的淡入淡出

回答

相關問題