的onmouseover的onmouseout淡入淡出没有的jQuery(onmouseover o

林寻找在进出HTML元素的淡入淡出的一流解决方案的onmouseover鼠标移开时不使用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>";

   }
}

因为你没有做任何事情来控制的变化率的淡入/输出工作不正常。这将只是立即执行和显示/隐藏的元素。

尝试是这样的：

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）褪色英寸与数字播放调整速度。

至于鼠标悬停/输出，你可以绑定其他事物一样的事件。

一般来说，附加JS事件，如你使用HTML属性，是令人难以接受的。通常你有一个这样的帮手： https://gist.github.com/955642

你想编写自己的方法，将检查其中的主要方法， addEventListener或attachEvent您的浏览器支持。