Javascript Fade-In Text при наведении мыши

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 .

Answer 2

Это не очень сложно, используя хорошо прокомментированный код, который у вас уже есть. Все, что вам нужно, это заменить вызов fadeIn() на более подходящие. Передайте либо идентификатор элемента, который вы хотите исчезнуть, либо сам элемент в первый аргумент. Вы можете сделать это для многих элементов, просто вызвав fadeIn() много раз. Анимация должна происходить одновременно.

Обновление: В случае ОП ему или ей потребуется удалить стиль непрозрачности 0 на теге body, чтобы эти изменения работали.