Здравствуйте. Прошу у вас помощи. Не знаю к кому обратиться. Посмотрите на код и на результат. Почему происходит такая жесть?
<div id="mono">
<div id="monoimg">
<img src="{image-1}" />
</div>
<div id="taxa">
<h1>[xfgiven_ttt]Мой текст в поле [xfvalue_ttt][/xfgiven_ttt]</h1>
</div>
</div>
#mono {
width: 200px;
overflow: hidden;
height: 200px;
float:left;
}
#taxa {
background: #00FFA9;
width:200px;
height:200px;
margin: 10px;
position: absolute;
z-index: -1;
}
#monoimg {
width:200px;
height:200px;
position: relative;
}
$(document).ready(function(){
$('#monoimg').click(function(){
$(this).css('position','relative');
$(this).animate({'top':'-200px'},200);
});
});
Задумка такая. Есть много блоков (новостей). Если нажать на блок, то картинка уйдёт наверх, и на этом месте можно будет прочитать текст и нажать "читать далее". То у меня текст под картинку залезать не хочет, то не хочет подниматься, то всё это криво происходит. Подскажите пожалуйста, что нужно изменить в коде?