Как дать эффект, как youTube имеет на движение мыши,

Question

Как применить событие mousemove, так что мы можем получить эффект, как у vlc-плеера для поиска, или Youtube для VideoTitle.

именно: На мыши движения шоу названия, если мышь не сдвинулась затем скрыть титул

Почему нужно: Я занимаюсь разработкой веб-сайтом что-то вроде библиотеки видео, есть один SeekBar, который я хочу, чтобы отключить, когда мышь не перемещается до someminute, и если движение мыши, то сделать его видимым.

Что я сделал:

 document.body.onmousedown = function() { 
      $(".myPrivateSeek").hide(); 
     }; 
     document.body.onmouseup = function() { 
      $(".myPrivateSeek").show(); 
     }; 

Althought его wroking, к сожалению его не так много, ПОЛЕЗНЫЕ

Answer 1

Если вы хотите его так, что на moveme мыши нт ваш элемент появляется, то по истечении заданного времени никакого движения он автоматически исчезает можно реализовать следующее:

$(document).ready(function() { 
    var timeoutId; 
    //Replace document.body with the element you wish the mouse movement to be recognised within. 
    $(document.body).on('mousemove', function() { 
     //Checks if an existing timeout function exists, if so remove it. 
     if (timeoutId) { 
      clearTimeout(timeoutId); 
     } 
     $(".myPrivateSeek").show(); 
     //Set a callback for how long to wait after the mouse has stopped moving to hide your element. 
     timeoutId = setTimeout(function() { 
      $(".myPrivateSeek").hide(); 
     }, 1000); //The time in milliseconds to wait. 
    }); 
}); 

Answer 2

Вы можете использовать mousemove события.

Ниже приведен рабочий код для этого, вы можете играть с ним here in JSfiddle и изменять его по своему усмотрению.

HTML

CSS

#item { 
     position: relative; 

     background: #CCC; 
    } 

    #item .tooltip { 
     position: fixed; 
     width: 80px; 
     height: 30px; 
     background: #06F; 
     z-index: 10; 
     display: none; 
    } 

JQuery

$(document).ready(function() { 

     $("#item").on('mousemove', function(e) { 

      $('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block'); 

     }); 

     $("#item").mouseout(function() { 
      $('.tooltip').css('display', 'none'); 
     }); 

    });