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()呼叫即可。将要淡化的元素的ID或元素本身传入第一个参数。您可以通过多次调用fadeIn()来为许多元素执行此操作。动画应该同时发生。

更新：在OP的情况下，他或她需要删除body标签上的0不透明样式才能使这些更改生效。

Answer 2

而不是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。

鼠标悬停的Javascript淡入文本

2 个答案: