jQuery if mouse not moving

Question

I was planning to create the effect like when watching video (like Youtube), the mouse is not moving for few second the bottom bar and cursor will automatically hidden, if moving mouse again cursor and bar will show automatically. Any suggestion do do that ? Thanks

var countdown;

$(".stage").hover(function() {
  $(".bar").fadeIn();
  clearTimeout(countdown);
});
countdown = setTimeout(function() {
  $(".bar").fadeOut();
}, 5000);

 $(".stage").hover(
  function(e){ $(".bar").fadeIn(); }, // over
  function(e){ $(".bar").fadeOut();

  }  // out
 );

.stage{
  height:400px;
  width:auto;
  background:#ccc;
  }
.bar{
  height:20px;
  width:auto;
  background:#000;
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stage">
  <div class="bar"></div>
</div>

http://stackoverflow.com/questions/1071356/is-it-possible-to-hide-the-cursor-in-a-webpage-using-css-or-javascript — cetver, May 11 '15 at 07:56
Sorry, I should have been clearer, what have you tried regarding the mouse movement part of what you're trying to achieve, anything? I see the hover is in place. — JohnDevelops, May 11 '15 at 07:58
See [here](http://stackoverflow.com/questions/10564690/jquery-hide-mouse-if-its-not-moving) — Callum., May 11 '15 at 07:59

score 2 · Answer 1 · answered May 11 '15 at 07:59

2

There is a function in jQuery called .mousemove() that you can use for your purpose.

answered May 11 '15 at 07:59

cespon

5,630
7
33
47

score 1 · Answer 2 · answered May 11 '15 at 08:02

Here's an working example: http://jsfiddle.net/nnnoLkue/. You should use mousemoveto appear the .bar when it's disappear.

$(".stage").hover(function() {
  $(".bar").fadeIn();
    fadeOutBar();
}, function(e){
    $(".bar").fadeOut();
});
$('.stage').mousemove(function() {
    $(".bar").fadeIn();
    fadeOutBar();
});
function fadeOutBar() {
    setTimeout(function() {
      $(".bar").fadeOut();
    }, 2000);
}

Vinc199789 · Answer 3 · 2015-05-11T08:06:13.533

0

time = 0;

time = setInterval(function(){
    //hide bar if he counts to 5 sec
    $(".bar").fadeOut();
},5000);

$('#video').mousemove(function(){
    clearInterval(time);
    //show bar
    $(".bar").fadeIn();
});

edited May 11 '15 at 08:06

answered May 11 '15 at 07:57

Vinc199789

1,046
1
10
31

bar is hidden but when i move my mouse bar still not showing up – FeelRightz May 11 '15 at 08:00
use `.show()` and `.hide()` or whatever you want to use to show the bar – Vinc199789 May 11 '15 at 08:05
yes I do tried but still not showing up after I move my cursor – FeelRightz May 11 '15 at 08:06

score 0 · Answer 4 · answered Oct 28 '20 at 04:53

0

If you want to delete the old hover and re hover element hide first the .bar

$('.stage').mousemove(function() {
   $(".bar").hide();
   $(".bar").fadeIn();
});

answered Oct 28 '20 at 04:53

Smar ts

49
5

jQuery if mouse not moving

4 Answers4