Div點擊圖片/幻燈片到JQuery的新div可能嗎？

我正在尋找一些方法來點擊一個DIV的圖像或鏈接，它會滑向另一個DIV不改變，以高度......所以像下面Div點擊圖片/幻燈片到JQuery的新div可能嗎？

<div id="div1"> 
<img src="image.jpg" onclick="slide_to_other_div" /> 
</div> 

<div id="div2" style="display:none"> 
<p>Another Div Here</p> 
</div>

但我不想手風琴的效果......我想在不影響身高的情況下滑向Div2？

進一步解釋......

假設你有一個表>

<table> 
<tr> 
    <td id="div1"><a href="#div2">Slide to Div2 Direction --> </a></td> 
    <td> id="div2" style="display:none">This is Div 2</td> 
</tr> 
</table>

所以，Div1構成滾動側身Div2的，當我點擊鏈接到Div2的

來源

2012-01-05 Satch3000

請提出您的問題更具體。「不影響身高」是什麼意思？什麼的高度？ 'div's？我看到'div2'是隱藏的;圖像移動後應該隱藏「div1」嗎？「div」在視覺上會發生什麼？ – PPvG 2012-01-05 15:17:12

更新的問題...希望這有助於 – Satch3000 2012-01-05 15:40:15

不是。我會建議像[slifty的回答]（http://stackoverflow.com/a/8744864/990877），但你的問題仍然太模糊。抱歉。 – PPvG 2012-01-05 15:49:38

我不是完全是確定我知道你想要發生什麼，但是這裏有一系列可能實現你的目標的步驟？

計算當前的圖像高度並明確地設置它，使其不會改變。
計算當前的絕對圖像位置
計算絕對DIV2位置
Detatch從DIV1圖像，設置它的風格與前面計算的絕對位置的位置是絕對的，並將其連接到身體
有生的位置的頂部和left屬性，因此「滑動」到新的位置
Detatch從體圖像，取出絕對定位值，將其附加到DIV2，並顯示DIV2

這聽起來像你在找什麼？每個步驟都可以通過jquery完成。

編輯：現在，我覺得我更瞭解你，你可能找一個水平手風琴。你可以從頭開始編寫代碼，但我會建議尋找現有的解決方案來指導你（或簡單地使用）。 Here就是一個例子。谷歌的「橫向手風琴家」會發現更多，如果這不符合你的想象。

來源

2012-01-05 15:18:35 slifty

對不起，我認爲談論一個圖像已經把每個人都關閉了我需要的東西。 Div 1有一個鏈接，Div 2是一個隱藏的div ...當我點擊Div 1鏈接時，它會執行一個「水平」滾動到Div B.希望這會有所幫助。 – Satch3000 2012-01-05 15:55:17

啊，所以你正在尋找一個水平的手風琴（即像這樣的東西：http://nicolahibbert.com/demo/liteAccordion/）？ – slifty 2012-01-05 16:05:34

幾乎但不完全。我需要一個簡單的什麼有Div 1的鏈接，並鏈接到Div 2，其中Div 2將取代100％的Div 1空間。 – Satch3000 2012-01-05 16:17:42

額外的HTML：

<a name="myAnchor"></a>

Jquery：

$('#div1 img').click(function(){ 
window.location = "/currentpath_or_link#myAnchor"; 
});

它不會給你一個不錯的動畫，但它會讓你到那裏。如果你想要一個不錯的動畫，你需要功能scrollTo() ，但我從來沒有用過。

來源

2012-01-05 15:17:35

更新說明 – Satch3000 2012-01-05 15:40:33

Div點擊圖片/幻燈片到JQuery的新div可能嗎？

回答

相關問題