4

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

多分誰かがよりスムーズな解決策を持っていますか?

4

2 に答える 2

4

この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
           }, 500, function () {
               animating = false;
           });
           console.log('menu hidden');
       }
   });
于 2013-10-27T12:57:03.070 に答える
1

左右に幅 100px の div を作成し、その div 要素で jquery マウスオーバー関数を使用すると、メニューが表示されたときにその div がトグルされます

これは、元はhttp://tympanus.net/Blueprints/SlidePushMenusからの HTML テンプレートである私の回答に対するjsfiddle リンクhttp://jsfiddle.net/8LHFsです。

HTML

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

CSS

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

Jクエリ

$('.toggle-menu').on('mouseover', null, function(){
    $('#showLeft').click();
});
于 2013-10-27T12:55:13.650 に答える