javascript - onmouseover onmouseout fadeIn fadeOut 没有 jQuery

Question

我正在寻找一种优雅的解决方案，用于在不使用 jQuery 的情况下在 mouseover 上淡入和淡出 HTML 元素(请称我为老式)。

理论上，下面的 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>";

   }
}

Answer 1

您的淡入/淡出无法正常工作，因为您没有采取任何措施来控制变化率。这将立即执行并显示/隐藏元素。

尝试这样的事情:

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

这应该会在超过 200 毫秒 (20 * 100/10) 内淡出。玩数字来调整速度。

至于 mouseover/out，你可以像其他任何东西一样绑定(bind)事件。

通常，像您这样使用 HTML 属性附加 JS 事件是不受欢迎的。通常你会有这样的助手:https://gist.github.com/955642

您想编写自己的方法来检查您的浏览器支持哪些主要方法，addEventListener 或 attachEvent。