Question

我正在寻找一个优雅的解决方案，用于在不使用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>";

   }
}

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，你可以像其他任何东西一样绑定事件。

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

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

onmouseover onmouseout fadeIn fadeOut没有jQuery

1 个答案: