onmouseover onmouseout fadeIn fadeOut沒有jQuery

我正在尋找一個優雅的解決方案，淡入淡出HTML元素onmouseover在mouseout而不使用jQuery（叫我老式）。onmouseover onmouseout fadeIn fadeOut沒有jQuery

從理論上講，下面的js解決方案應該可以工作，但是我在工作時遇到問題，有人可能會指向正確的方向或提供替代解決方案嗎？

我的js功能和插入HTML是一樣的，其在頁面上...

function fadeIn(element) { 

    for (i = 0; i < 100; i++) { 
     var value = 0 + i; 


     element.style.opacity = value; 
     element.style.filter = 'alpha(opacity=' + value + ')'; 
    } 
} 

function fadeOut(element) { 

    for (i = 0; i < 100; i++) { 
     var value = 100 - i; 

     element.style.opacity = value; 
     element.style.filter = 'alpha(opacity=' + value + ')'; 
     element.innerHTML = "<div class='container' id='container' onmouseover='fadeOut(this)'><img src='./images/myImage.jpg' onload='fadeIn(this.parent)' /></div>"; 

    } 
}

來源

2012-04-25 Christopher

jQuery :-P庫使生活更輕鬆。 – 2012-04-25 04:10:09

>優雅的解決方案 >在沒有使用jQuery的情況下淡入淡出HTML元素onmouseover on mouseout > 選擇任意2 – Cheezmeister 2012-04-25 04:11:13

你的權利，因爲你沒有做任何事情來淡入/輸出不起作用控制變化率。這將立即執行並顯示/隱藏元素。

嘗試這樣：

function fadeIn(el) { 
    var opac = 0; 
    var i = setInterval(function() { 
    opac += 10; 
    if (opac >= 100) { 
     clearInterval(i); 
     opac = 100; 
    } 
    el.style.opacity = opac; 
    el.style.filter = 'alpha(opacity=' + opac + ')'; 

    }, 20); 
}

這應該200ms以上（20 * 100/10）褪色英寸玩數字來調整速度。

至於mouseover/out，你可以像其他任何事情一樣綁定事件。

一般來說，使用HTML屬性來附加JS事件，例如使用HTML屬性，是不被接受的。通常你會有這樣的幫手：https://gist.github.com/955642

你想寫你自己的方法來檢查你的瀏覽器支持哪種主要方法，addEventListener或attachEvent。

來源

2012-04-25 04:20:57 loganfsmyth

onmouseover onmouseout fadeIn fadeOut沒有jQuery

回答

相關問題