我正在尝试创建一个当鼠标靠近视口左侧时可见的菜单(比如距离左侧 100 像素,否则显示菜单隐藏)。它应该有点像 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');
});
}
});
似乎上面的编辑做了一点,问题是/是隐藏菜单时,动画必须完成。如果不是,并且您再次使用鼠标 < 100,那么它会卡住并且没有显示任何内容。
也许有人有更顺畅的解决方案?