CODEWITHSUNDEEP
jquerymousemove
Stephen
Stephen

Reputation: 21

JQuery: mousemove fade in/out element

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"

Upvotes: 2

Views: 4971

Answers (3)

cletus
cletus

Reputation: 625037

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(hide_playlist, 3000);
});

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.

Edit: fixed function name typo and updated setTimeout arguments so timeout call works.

Upvotes: 5

Endrju
Endrju

Reputation: 11

I am using this and it works well:

$(document).ready(function() {
    $('.elementClass').fadeTo(0, '0.5').hover(function() {
        $(this).fadeTo(500, 1);
    }, function() {
        $(this).fadeTo(350, '0.8');
    });
});

Upvotes: 1

Adriaan Stander
Adriaan Stander

Reputation: 166376

Have a look at this

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

Upvotes: 0

Related Questions