Revisions for "Re-write jQuery script to animate an element based on mouse movement. "

Re-write jQuery script to animate an element based on mouse movement.

I have a side navigation element that fades in during mouse movement, and then fades out after a setTimeout when the mouse stops. I'd like to amend this so that the element is hidden outside the window by default and then slides into view on mouse movement (no fading at all). Then to animate back out after a setTimeout when the mouse stops.

I tried this already with .animate() but the setTimeout() didn't seem to work. I'd like to see other people's ways of doing this. It must be stable e.g. no queuing, lagginess, and compatible on FF, Chrome, IE 7+, Safari, Opera.

    html, body {
        height:100%;
        font-family: Arial, Verdana, Tahoma;
    }
    #nav {
        width: 50px;
        height:270px;
        position: fixed;
        top: 0px;
        left: 0px;
        background: #333;
        padding:10px 0 10px 0;
        display:none;
    }

    a {
        padding: 10px;
        text-decoration: none;
        color: #fff;
        font-size: 40px;
        display:block;
    }


        $(document).ready(function() {
        var timer, p = $("#nav");
        $(document).on("mousemove", "body", function() {     
           // p.animate({left:"0px"},300);
           p.fadeIn("fast");
           window.clearTimeout(timer);
                timer = setTimeout(function(){
                   // p.animate({left:"-50px"},300);
                   p.fadeOut("slow");
                }, 1000);
            });
        });


<div id="nav">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
</div>
Re-write jQuery script to animate an element based on mouse movement.
I have a side navigation element that fades in during mouse movement, and then fades out after a setTimeout when the mouse stops. I'd like to amend this so that the element is hidden outside the window by default and then slides into view on mouse movement (no fading at all). Then to animate back out after a setTimeout when the mouse stops. I tried this already with .animate() but the setTimeout() didn't seem to work. I'd like to see other people's ways of doing this. It must be stable e.g. no queuing, lagginess, and compatible on FF, Chrome, IE 7+, Safari, Opera. html, body { height:100%; font-family: Arial, Verdana, Tahoma; } #nav { width: 50px; height:270px; position: fixed; top: 0px; left: 0px; /* left: -50px */ background: #333; background: #333; padding:10px 0 10px 0; display:none; } a { padding: 10px; text-decoration: none; color: #fff; font-size: 40px; display:block; } $(document).ready(function() { var timer, p = $("#nav"); $(document).on("mousemove", "body", function() { // p.animate({left:"0px"},300); p.fadeIn("fast"); window.clearTimeout(timer); timer = setTimeout(function(){ // p.animate({left:"-50px"},300); p.fadeOut("slow"); }, 1000); }); });
Back to question