如何在某个位置滑出div

Question

当标签悬停在上面时，我有一个div滑出。

HTML：

<div class="cellDataViewTdmStatus divCell userSitesCol7">
    <label class="lblViewTdmStatus">View Status</label>
</div>


<div id="tdmStatus" class="hidden flyout">
    LOREM IPSUM DOLOR SIT AMET<br>
    Blah blah blah
</div>

这是标签的div在页面上的样子（请注意右侧的“查看状态”文本-上面代码中的标签）：

CSS：

.hidden { display: none; }

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

JS：

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

悬停标签时，此功能可根据需要发挥作用 （从隐藏状态滑出）。

我需要div滑出，使其看起来像是从“查看状态”标签左侧的边框进入的。

此外，这是一个表格，其中每行都会有一个标签悬停在上面，因此我需要滑动div才能滑到所单击标签的左侧。

Answer 1

弄清楚了这一点，这要归功于Putvande的正确推动。

我只是查看了单击的标签的position.left和position.top值，然后对该值进行了调整，直到它位于我想要的位置（在单击的标签的左侧）。 我还必须从CSS中删除“ top”和“ right”属性。

这是新的js代码：

$('.lblViewTdmStatus').hover(function() {
var position = $(this).position(),
    left = position.left,
    top = position.top,
    divLeft = position.left - 590,
    divTop = position.top - 50;
//console.log('position.left: ' + position.left + ' position.top: ' + position.top);

$('.flyout').css('top',divTop).css('left',divLeft);
$('.flyout').toggle('slide', {direction:'right'});
});