How to write a jQuery animate in this situation?

I need a jqeury animate effection. when I click img1.jpg, img2.jpg will animate right 200px, but I have too many divs and other html elements, I tried many times, it also failed. How to write correctly? Thanks. PS: h1, the font is on the top of image, and b class="effect" is some fadein effect, it should be the toppest of the all.

<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> 

HTML:

 

so what is it doing right now as it is? nothing?

 

Yes, nothing happened.

 

Have to use marginRight because right only works if the element has absolute position.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">  
jQuery(document).ready(function(){
   jQuery(".font1").click(function(){ 
      jQuery(".div21").animate({"marginRight": "+=200px"}, "slow"); 
   }); 
});
</script> 

Code (markup):

If you want to use right, you need to make this change too:
<div class="div21" style="float:right; position:absolute; right:0;">

Your code only works when the heading is clicked. If you want it to happen when the image is clicked, add the class to the image as well.
<img class="font1" src="img1.jpg">

 

Well, this can solve my problem. Thanks friend.