的更新：

Question

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

我的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 ^

的更新：

我设法让以下工作;

$("#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场景？

Answer 1

很不清楚你究竟想要什么。

但是你发布的剧本不能像你这样做：

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

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

在父悬停上向左滑动，向右滑动并保持内部内容可见

的更新：

1 个答案: