如何在某個位置滑出一個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的樣子在頁面上（注意右邊的「查看狀態」的文字 - 這是在代碼中的標籤上方）：

example of page

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滑出，看起來好像它是從「View Status」標籤左邊的邊界來的。

此外，這是一個表格，其中每一行都有一個標籤懸停在上方，所以我需要滑動div滑出到被點擊的標籤的左側。

來源

2014-01-16 marky

你需要找到偏移（左上）的鏈接點擊，並相應地把你的幻燈片。 – putvande

想通了，感謝putvande的正確方向。

我剛纔查看了點擊標籤的position.left和position.top值，然後對該值進行了調整，直到它被放置在我想要的位置（點擊標籤的左側）。我也必須從CSS中刪除「頂」和「右」屬性。

這裏是新的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'}); 
});

來源

2014-01-16 19:18:26 marky

如何在某個位置滑出一個div

回答

相關問題