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

回答

相关问题