how to give effect like youTube has on mouse movement,

Question

How to apply event of mousemove, so we can get effect like vlc player has for seekbar, or Youtube has for VideoTitle.

i.e : On mouse movement show title, if mouse not moved then hide title

Why need : I am developing website something like video library, there is one seekbar which I want to disable when mouse is not moved till someminute, and if mouse move then make it visible.

What I Did :

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

althought its wroking,Unfortunately its not so much helpfull,

Answer 1

If you would like it so that on mouse movement your element appears then after a specified time of no movement it automatically disappears you could implement the following:

$(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

You can make use of mousemove event.

Below is a working code for that , you can play with it here in JSfiddle and modify as you want.

HTML

<div id="item">
    <p>This is my item</p>
    <div class="tooltip">Tooltip</div>
</div>

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');
        });

    });