Jquery, animate div when mouse is near left side

Question

I am trying to create an menu that will be visible when the mouse is near the left of the viewport (say till 100px from the left, show menu otherwise hide). It should work a bit like the Windows 8 charms bar.

I have the following already, but it is not really working well.

var mouse_position;
//GET MOUSE POSITION
$(document).mousemove(function (mouse_pointer) {
    //$("body").on("mousemove", function(mouse_pointer) {
    //console.log(mouse_pointer.pageX - $(window).scrollLeft());
    //mouse_position = mouse_pointer.pageX - $(window).scrollLeft();
    mouse_position = mouse_pointer.clientX;

    //console.log(mouse_position);
    if (mouse_position <= 100 && !$("#cms_bar").is(":visible")) {
        //SLIDE IN MENU
        $('#cms_bar').show().animate({
            width: '100px'
        }), 500;
        console.log('menu shown');
    } else if (mouse_position > 100 && $("#cms_bar").is(":visible")) {
        $('#cms_bar').animate({
            width: '0px'
        }, 500, function () {
            $(this).hide();
            console.log('menu hidden');
        });
    }
});

Clearly I am doing something wrong.

EDIT

var mouse_position;
//GET MOUSE POSITION
$(document).mousemove(function(mouse_pointer) {
//$("body").on("mousemove", function(mouse_pointer) {
    //console.log(mouse_pointer.pageX - $(window).scrollLeft());
    //mouse_position = mouse_pointer.pageX - $(window).scrollLeft();
    mouse_position = mouse_pointer.clientX;

    //console.log(mouse_position);
    if (mouse_position <= 100 && !$("#cms_bar").is(":visible")) {
        //SLIDE IN MENU
        $('#cms_bar').stop().show().animate({width: '100px'}), 300;
        console.log('menu shown');
    }
    else if (mouse_position > 100 && $("#cms_bar").is(":visible")) {        
        $('#cms_bar').stop().animate({
            width: '0px'
        }, 300, function() {            
            //$(this).hide();
            $(this).css("display","none")
            console.log('menu hidden');
        });
    }
});

Seems that above edit does a bit more, the problem was / is that when hiding the menu, the animation must be completed. If not and you where again with your mouse < 100 then it got stuck and nothing was shown.

Maybe someone has a smoother solution ?

Answer 1

you can create div on the left and right with width 100px, and then you can use jquery mouseover function at that div element, and that div will be toggle when menu visible

this is jsfiddle link http://jsfiddle.net/8LHFs for my answer which html template originally from http://tympanus.net/Blueprints/SlidePushMenus

HTML

<div class="toggle-menu"></div>

CSS

.toggle-menu{
    width: 100px;
    height: 1000px;
    position: fixed;
}

Jquery

$('.toggle-menu').on('mouseover', null, function(){
    $('#showLeft').click();
});

Answer 2

I created a jsfiddle for this http://jsfiddle.net/ravikumaranantha/Wtfpx/2/ I use left position to hide it instead of visibility

html

<div id="cms_bar">hidden bar</div>

css

#cms_bar {
    height:500px;
    width:100px;
    background-color:red;
    position:absolute;
    left:-100px;
    top:0;
}

JavaScript

var mouse_position;
var animating = false;
   //GET MOUSE POSITION
$(document).mousemove(function (e) {
       //$("body").on("mousemove", function(mouse_pointer) {
       //console.log(mouse_pointer.pageX - $(window).scrollLeft());
       //mouse_position = mouse_pointer.pageX - $(window).scrollLeft();
       if (animating) {
           return;
       }
       mouse_position = e.clientX;

       console.log(mouse_position);
       if (mouse_position <= 100) {
           //SLIDE IN MENU
           animating = true;
           $('#cms_bar').animate({
               left: 0,
               opacity: 1
           }, 200, function () {
               animating = false;
           });
           console.log('menu shown');
       } else if (mouse_position > 100) {
           animating = true;
           $('#cms_bar').animate({
               left: -100,
               opacity: 0
           }, 500, function () {
               animating = false;
           });
           console.log('menu hidden');
       }
   });