我想使滑块面板从右边界屏幕向左滑动。 当我“悬停”面板调用者:选项卡时,我希望幻灯片开始移动。当面板移动时,它会推动标签。我有这样的代码:使用jQuery和css3水平滑动面板
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');
});
}
});
});
问题是,当我离开的标签用鼠标光标 “悬停” 面板,面板消失。只要我将鼠标悬停在标签和面板上,我希望面板保持打开状态。我如何做到这一点?
编辑答案。让我知道它是否适合你 –