Javascript Fade-in Text on mouse-over

Question

Hello, someone already has already posted the solution to my question, seen below. I want the same effect but only for certain parts of the page rather than all of the content. I basically only want certain parts of the page to fade in when the mouse is moved.

// 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

This is not very difficult using the well-commented code you already have. All you need is to replace the fadeIn() call with more appropriate calls. Pass in either the ID of an element you want to fade or the element itself into the first argument. You can do this for many elements just by calling fadeIn() many times. The animation should occur simultaneously.

Update: In the OP's case, he or she will need to remove the 0 opacity style on the body tag in order for these changes to work.

Answer 2

Instead of fadeIn(this, 1000);

• Assign a class fade to the elements you want to fade.

• Add style attribute style="opacity: 0;" to those elements instead of the body element.

• Get the elements you want to fade

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

• Iterate through the elements fading each one

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

Here's a modified jsbin.