Jquery,当鼠标靠近左侧时动画div

我正在尝试创建一个菜单,当鼠标靠近视口的左边时(例如,从左边开始直到100px,显示菜单,否则隐藏)将显示一个菜单.它应该有点像 Windows 8魅力吧.

我已经有了以下内容,但它并没有真正起作用.

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

显然我做错了什么.

编辑

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

似乎上面的编辑做了一点,问题是,当隐藏菜单时,必须完成动画.如果没有,你再次使用鼠标<然后它被卡住了,没有显示任何内容. 也许有人有一个更顺畅的解决方案？

解决方法

我为这个 http://jsfiddle.net/ravikumaranantha/Wtfpx/2/创建了一个jsfiddle,我使用左侧位置隐藏它而不是可见性

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
           },function () {
               animating = false;
           });
           console.log('menu hidden');
       }
   });