マウスがビューポートの左側にあるときに表示されるメニューを作成しようとしています (たとえば、左から 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 未満の場合は、動かなくなり、何も表示されませんでした。
多分誰かがよりスムーズな解決策を持っていますか?