Div Нажмите на изображение/Слайд в новый div с JQuery?

Question

Ищу какой-нибудь способ нажать на изображение или ссылку на Div, и она будет скользить в другой 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

Answer 1

Я не полностью уверен, что знаю, что вы хотите, но вот последовательность шагов, которые могут выполнить вашу цель?

1. Рассчитать текущую высоту изображения и явно установить его так, чтобы он не изменился.
2. Вычислить текущее абсолютное положение изображения
3. Вычислить абсолютную позицию div2
4. Detatch изображение из див1, установите его стиль будет позиция абсолютной с абсолютной позиции, рассчитанной ранее, и прикрепить его к телу
5. анимировать верхний и левый свойства позиции, так это «скользит» на новое место
6. Detatch изображение из тела, удалить абсолютные значения позиционирования, крепят его к div2, и показать div2

Это похоже на то, что вы ищете? Каждый из этих шагов может быть выполнен с помощью jquery.

---

EDIT: Теперь, когда я думаю, что я понять вас больше, вы, вероятно, ищет горизонтальной Accordian. Вы можете закодировать это с нуля, но я бы предложил посмотреть существующие решения, которые помогут вам (или просто использовать). Here - пример одного. Google «горизонтальный гармоник», чтобы найти больше, если это не устраивает вашу фантазию.

Answer 2

дополнительный HTML:

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

JQuery:

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

Это не даст вам приятной анимации, но она доставит вас туда. Если вам нужна приятная анимация, вам понадобится функция scrollTo() , но я никогда не работал с этим.