How to write a jQuery animate in this situation?

[youlichika]

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>

[Airshow]

You need to give the img2 float something of width:200px to rest aginst, then reduce its width in the animation.

Insert above the second html block

<div id="rightFiller" style="float:right;width:200px;">&nbsp;</div>

Animate with :

$(document).ready(function() {
	$(".font1").click(function() {
		$("#rightFiller").animate({width : "0px"}, "slow");
	});
	$(".font2").click(function() {
		$("#rightFiller").animate({width : "200px"}, "slow");
	});
});

The second click function allows img2 etc to be pushed left again. Delete if not required.

Airshow

[youlichika]

Excuse me, where is the second html block?
If I add a image3 at the right of image2, can div2 still be moved? Thanks.

<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>
</a>
<a href="#" class="click"> 
<div class="div31" style="float:left;">
<h1 class="font3" style="z-index:5;">text3</h1> 
<div class="div32"> 
<div class="div33">  
<img src="photo3.jpg"> 
<b class="effect" style="z-index:10;"></b> 
</div> 
</div> 
</div> 
</a>

[Airshow]

You have two blocks of very similar HTML - the "img1 block" and the "img2 block". Add my filler div immediately above the second block.

And yes, you can have a third (img3) block if you want. Its position and behaviour will depend on whether it is floated left or right.

Airshow

[youlichika]

Ah, I know ,the click to push a empty div and make img2 block run right. Thanks,Airshow.

[Airshow]

That's it.