jquery - 使用 jQuery 和 css3 水平滑动面板

Question

我想制作一个从右边框屏幕向左滑动的 slider 面板。当我“悬停”面板调用者时，我希望幻灯片开始移动:选项卡。当面板移动时，它会插入标签。我有这段代码:

html

<div id="panel">
<div class="content"><!-- Content --></div>
</div>
<div id="tab">hit me for show panel</div>

CSS

#tab {
    width:50px;
    height:150px;
    position:fixed;
    right:0px;
    top:100px;
    display:block;
    cursor:pointer;
}
#panel {
        position:fixed;
    right:0px;
    top:50px;
    background-color:#999999;
    height:500px;
    width:0;
}
#panel .content {
    width:290px;
    margin-left:70px;
}

jQuery

$(function() { 
        $('#tab').hover(function(event) {
        var panel = $('#panel');
        if (panel.hasClass('open')) {       //condition error
            panel.removeClass('open');
            $('.content').fadeOut('slow', function() {
                $('#panel').stop().animate({
                    width: '0',
                    opacity: 0.0
                }, 500)
            })
        } else {
            panel.addClass('open');
            $('#panel').stop().animate({
                width: '400',
                opacity: 1
            }, 500, function() { 
                $('.content').fadeIn('slow'); 
            });
        }
    }); 
});

问题是当我将鼠标光标离开选项卡用于“悬停”面板时，该面板消失了。只要我“悬停”在两个选项卡和面板上，我就希望面板保持打开状态。我该怎么做？

Answer 1

看下面的片段

我稍微改变了你的 JQ。首先，我删除了 if 并在可见的 panel 上添加了一个 mouseOut 函数(类 open )

因此，当您将鼠标悬停在 tab 上时，面板 会出现，但在悬停 时什么也不会发生。相反，如果您从面板中 mouseout 面板会再次隐藏。因此，只要您将光标放在 panel 上，它就会保持打开状态。

作为旁注，您可以使用 addClass('open') 和 removeClass('open') 以及在 mouseout() 中删除部分 方法只需将 #panel.open 更改为 #panel 或使用变量 panel 。如果你不想在 CSS 或类似的东西中设置 .open 类的样式，你可以这样做。

希望对你有帮助。让我知道:)

        $('#tab').hover(function(event) {
        var panel = $('#panel');
            panel.addClass('open');
          
            $('#tab').stop().animate({
                'right': '400',
           
               
            }, 500)
            $('#panel').stop().animate({
                width: '400',
                opacity: 1
               
            }, 500, function() { 
                $('.content').fadeIn('slow'); 
            });
   
         $('#panel.open').mouseout(function() { 
               $(this).removeClass('open');
               
            $('.content').fadeOut('slow', function() {
            $("#tab").removeClass("moveme")
                $('#panel').stop().animate({
                    width: '0',
                    opacity: 0.0
             }, 500)
                 $('#tab').stop().animate({
                'right': '0',
           
               
            }, 500)
      
     
     }); 
    }); 
           });

#tab {
    width:50px;
    height:150px;
    position:fixed;
    right:0px;
    top:100px;
    display:block;
    cursor:pointer;

}
#panel {
        position:fixed;
    right:0px;
    top:50px;
    background-color:#999999;
    height:500px;
    width:0;

}
#panel .content {
    width:290px;
    margin-left:70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<div class="content"><!-- Content --></div>
</div>
<div id="tab">hit me for show panel</div>