2

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

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

   }
}
4

1 回答 1

2

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

尝试这样的事情：

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您的浏览器支持。

于 2012-04-25T04:20:57.113 回答