我正在尝试创建一个菜单系统，它在父元素的mouseover（或悬停）上滑动，并在mouseout上滑动 - 但这也确保了滑出是可访问的，因为它将包含用户的选项菜单。向左滑动，向右滑动父内容并保持内容可见

我的html是;

<div id="sidebarDiv"> 

    <div id="slidemenuDiv"> 

    cont here must be accessible 

    </div> 

</div>

我发现稍微在这个线程的解决方案：HERE但这是向上滑动和向下滑动的情况。另外我注意到，动画是一个小错误 - 几个mouseover/mouseout事件后，内部div元素的高度会改变，你需要刷新页面重置它。

我一直在尝试修改代码：http://docs.jquery.com/UI/Effects/Slide但没有多少运气。

任何我可能看的地方的建议？或者如何调整下面的代码，使其在左侧滑动和右侧滑动时工作;

$("#slidemenuDiv").hide(); 
$('#sidebarDiv').hoverIntent(function() { 

    $("#slidemenuDiv").stop().slideDown('slow'); 

}, 
function() { 
    // I don't want the div to hide if user hovers over it 
    $("#slidemenuDiv").stop().fadeOut('slow'); 
});

下面是一个示例图片，可以解释我想要实现的更好;

http://img850.imageshack.us/img850/460/unled1xw.jpg

谢谢 W¯¯

UPDATE：

我设法得到以下工作;

$("#slidemenuDiv").stop().hide(); 
$("#sidebarDiv").hoverIntent(
     function() { 
      $("#slidemenuDiv").stop().show("slide", { direction: "right" }, 1000); 
     }, 
     function() { 
      $("#slidemenuDiv").stop().hide("slide", { direction: "right" }, 1000); 
     } 
);

但要注意的是我必须包括以下内容;

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> 
<script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script> 
<script src="http://ui.jquery.com/latest/ui/jquery.effects.core.js"></script> 
<script src="http://ui.jquery.com/latest/ui/jquery.effects.slide.js"></script>

好像很多的只是一个简单的slideLeft，slideRight场景赫克？

来源

2011-10-18 Wordpressing

完全不清楚你到底想要什么。

但是从您发布不能你做类似的脚本：

$("#slidemenuDiv").hide(); 

$('#sidebarDiv').hoverIntent(
     function() { 
      $("#slidemenuDiv").stop().animate({ left: '-=50'}); 
     }, 
     function() { 
      $("#slidemenuDiv").stop().animate({ left: '+=50'}); 
     } 
);

来源

2011-10-18 08:25:13

里面还有语法错误，做单引号。 – GregL

谢谢，应该修正:) –

嗨马可，谢谢你的回应。我尝试过，但没有结果。我在上面包含了一个示例图片，可能有助于解释我正在尝试实现的内容。 – Wordpressing

向左滑动，向右滑动父内容并保持内容可见

UPDATE：

回答

相关问题