JQuery: mousemove fade in/out element.

Question

I have a video player page and want the playlist div to only fade in when the mouse is moving, and fade out if the mouse is idle for 3 seconds. The div's class is "fadeobject" and it's ID is ""video-chooser"

Answer 1

Have a look at this

Jquery: how to make something fade out when mouse is idle. When mouse moves again, It fadesIn!

Answer 2

Assuming you mean the mouse moves anywhere and not just over the relevant <div> apply a mousemove() event handler to the page:

var fadeout = null;
$("html").mousemove(function() {
  $("div.fadeobject").stop().fadeIn("slow");
  if (fadeout != null) {
    clearTimeout(fadeout);
  }
  fadeout = setTimeout(3000, hide_playerlist);
});

function hide_playlist() {
  $("div.fadeobject").stop().fadeOut("slow");
}

Every time the mouse moves a timer is started to fade the div after three seconds and the previous timer (if there was one) is cancelled.

Note: the stop() isn't strictly required here but is recommended when dealing with multiple animations/effects.