如何滑出一个div

Question

我想从页面上的某个位置滑出一个div。当用户将鼠标悬停在标签上，并在下图中的表格中显示“查看状态”时，我想要一个div显示为好像它滑出到表格中该框的左侧 - 滑动div必须位于桌子。

我目前正在使用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; }

/ *我添加了顶部和右侧属性作为解决方案* /

的一部分

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

更新

我发现this jsFiddle以我想要的方式运行（我可以使用向下滑动）。我有几乎相同的代码，所以我不知道为什么当鼠标停留在标签上时我的上下不断滑动。

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

WORKING

它不断滑入和滑出的原因是因为div在我的鼠标滑动的地方滑动，这触发了切换。我通过改变div上的“right”属性来解决这个问题。

Answer 1

你可以这样做

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