Как написать jQuery для анимации в этой ситуации?

Question

<script type="text/javascript"> 
jQuery(".font1").click(function(){
  jQuery(".div21").animate({"right": "+=200px"}, "slow");
});
</script>
<a href="#" class="click">
<div class="div11" style="float:left;">
<h1 class="font1" style="z-index:5;">text1</h1>
<div class="div12">
<div class="div13"> 
<img src="img1.jpg">
<b class="effect" style="z-index:10;"></b>
</div>
</div>
</div>
</a>
<a href="#" class="click">
<div class="div21" style="float:right;">
<h1 class="font2" style="z-index:5;">text2</h1>
<div class="div22">
<div class="div23">
<img src="img2.jpg">
<b class="effect" style="z-index:10;"></b>
</div>
</div>
</div>

Мне нужна анимация jquery. Когда я нажимаю img1.jpg, img2.jpg будет анимировать прямо на 200px, но у меня слишком много div и других html-элементов, я пробовал много раз, это также не удавалось. Как правильно написать?

PS: H1, шрифт вверху изображения, а b class = "effect" - некоторый эффект затухания, он должен быть самым верхним из всех.

Answer 1

Вам нужно добавить положение: относительно атрибута стиля div21, чтобы оно могло анимировать «правильное» значение.

<div class="div21" style="float:right; position:relative;">

В качестве альтернативы, вы также можете установить абсолютное и правильное положениеизначально значение 01007 *

jQuery(function() {
    jQuery(".font1").click(function() {
    ...
    });
});

В качестве другого примечания вам не хватает закрывающего тега привязки </a> в конце вашего примера.