onmouseover onmouseout fadeIn fadeOut no jQuery

本文关键字：no jQuery fadeOut fadeIn onmouseout onmouseover 更新时间：2023-09-26

我正在寻找一种优雅的解决方案，可以在不使用jQuery的情况下在鼠标悬停时淡入和淡出HTML元素（称我为老式的）。

从理论上讲，下面的js解决方案应该可以工作，但是我遇到了工作问题，有人可以指出我正确的方向或提供替代解决方案吗？

我的 Js 函数是，插入的 HTML 与页面上的 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);
}

这应该在 200 毫秒（20 * 100/10）内淡出。玩数字来调整速度。

至于鼠标悬停/悬停，您可以像其他任何东西一样绑定事件。

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

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