如何將div滑出

我想從頁面上的某個位置滑出div。當用戶將鼠標懸停在下面圖片的表格中的「查看狀態」標籤上時，我想要一個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; }

/* I加入頂部和右側的屬性作爲解決方案的一部分*/

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

enter image description here

UPDATE

我發現this jsFiddle，其功能的方式予想要它（我可以滑下來）。我有幾乎相同的代碼，所以我不知道爲什麼當鼠標停留在標籤上時，我會不停地上下滑動。

jsFiddle 我加了this Fiddle。我設置的一個非常基本的例子。隨意與此合作。

WORKING

它之所以不斷滑動和退出是因爲格被滑過在我的老鼠，其觸發切換。我通過改變div上的「right」屬性來解決這個問題。

來源

2014-01-16 marky

看看：http://stackoverflow.com/questions/19316805/how-to-slide-toggle-a-div-right-to-left – Alvaro

一個很好的文章，顯示從各個方向滑動在這裏：http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/ – Mark

你可以這樣做

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

來源

2014-01-16 17:13:33 chen

這幾乎可以工作，但隨着鼠標懸停在標籤（lblViewStatus）div不斷地滑入和滑出。 – marky

將此'.lblViewStatus'更改爲您的標籤ID。 – chen

我不能。這是在一個表格中，每一行都會有相同的標籤，以指示用戶將鼠標懸停在文本上以查看狀態。 – marky

如何將div滑出

回答

相關問題