jquery - 如何滑出一个div

Question

我想从页面的某个位置滑出一个div。当用户将鼠标悬停在下图中表格中带有“查看状态”的标签上时，我希望 div 看起来好像正在滑出表格中该框的左侧 - 滑动的 div 必须位于顶部 table 。

我目前正在使用 CSS/jQuery 使其从代码中的位置向下滑动，但我不知道如何更改它在页面上的位置(或如何使其滑动到向左而不是向下)。

<div id="flyoutDiv" class="hidden flyout">Some contents of the div</div>

.hidden { display: none; }

.flyout {
width: 560px;
height: 56px;
background-color: #EFF7DF;
padding: 10px;
border-radius: 10px;
border: solid 1px #CC6600;
position: abosolute;
overflow: hidden;
z-index: 10000;
    top: 100px;
    right: 300px; }

/* 我添加了 top 和 right 属性作为解决方案的一部分 */

$('.lblViewStatus').hover(function() {
    $('.flyout').slideToggle();
});

更新

我找到了 this jsFiddle以我想要的方式运行(我可以向下滑动)。我有几乎相同的代码，所以我不知道为什么当鼠标停留在标签上时我的代码一直上下滑动。

jsFiddle 我添加了 this Fiddle .我的设置的一个非常基本的例子。随意使用它。

工作

它不断滑入和滑出的原因是因为 div 滑过我鼠标所在的位置，这触发了切换。我通过更改 div 上的“正确”属性解决了这个问题。

Answer 1

你可以这样做

$('.lblViewStatus').hover(function() {
  $('.flyout').toggle("slide", {direction:'left'});
});