如何在这种情况下编写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 =“效果”是一些淡入淡出的效果，它应该是全部最高的。

Answer 1

您需要添加position：相对于div21的style属性，以便为“right”值设置动画效果。

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

或者，您还可以将位置设置为绝对值，并将最初的值设置为0。

<div class="div21" style="position:absolute; right: 0;"> 

此外，如果事件处理程序从未被调用，尽量包裹你的绑定功能，在一个匿名函数并将其传递到jQuery的，因此加载的jQuery之后被调用。

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

作为另一个说明，您在示例结束时缺少闭合锚点标记</a>。