鼠标悬停时 Javascript 淡入文本

Question

有人已经发布了我的问题的解决方案，如下所示。我想要相同的效果，但只针对页面的某些部分而不是所有内容。我基本上只希望页面的某些部分在鼠标移动时淡入。

// attach event handler
document.body.onmousemove = function(){
  fadeIn( this, 1000 );      // 1000ms -> 1s
  this.onmousemove = null; // remove to only fade in once!
};

// sets the opacity of an element (x-browser)
function setOpacity( obj, value ) {
  if ( obj ) {
    obj.style.opacity = value / 100;
    obj.style.filter  = 'alpha(opacity=' + value + ')';
    obj.style.zoom    = 1;
  }
}

// makes an element to fade in
function fadeIn( dom, interval, delay ) {

      interval  = interval || 1000;
      delay     = delay    || 10;

  var opacity   = 0,
      start     = Number(new Date()),
      op_per_ms =  100 / interval;

  if ( typeof dom === "string" ) {
    dom = document.getElementById( dom );
  }

  function step() {

    var now     = Number(new Date()),
        elapsed = now - start;
        opacity = elapsed * op_per_ms;

    setOpacity( dom, opacity );

    if ( elapsed < interval )
      setTimeout( step, delay );
    else
      setOpacity( dom, 100 );
  }

  setTimeout( step, delay );
};

Answer 1

代替 fadeIn(this, 1000);

• 为要淡入淡出的元素分配一个类 fade。

• 将样式属性 style="opacity: 0;" 添加到这些元素而不是 body 元素。

• 获取想要淡出的元素

  var elements = document.getElementsByClassName('fade');
  

• 遍历每一个淡出的元素

  for (var i = 0; i < elements.length(); i++) {
      fadeIn(elements[i], 1000);
  }
  

这是修改后的 jsbin .