Combining fade and move

I’m making (or at least I try to) a roll over effect with a fade and moving object, for which I used a simple caption script as a basis. I have it nearly working the way I would like to have but, I’m not realy happy with the moving part. This is what I have


	$('div.slide').hover(function(){
		$(this).children('.caption').stop().fadeTo(500, 0.7);
		$(this).children('.caption_image').stop().fadeTo(500, 0.7);
		$(this).children('.caption_image').animate({ marginLeft: "-=15px", }, 200 );
	},function(){
		$(this).children('.caption').stop().fadeTo(500, 0);
		$(this).children('.caption_image').stop().fadeTo(500, 0);
		$(this).children('.caption_image').animate({ marginLeft: "+=15px", }, 200 );
	});

As you can see there are two images, a background(caption) and a overlaying image(caption_image). The fadeTo is working fine, but the moving animation is not going smooth at all. Is there another way of doing this? More that both animations start at the same time instead of one after the other, because that in my opinion is making it not looking smooth!

Thank you in advance

Okay I found a way to make things look smoother. First of all by combining the fadeTo and marginLeft animation for the caption_image into one call and secondly by reversing the order for the second part of the function.


	$('div.slide').hover(function(){
		$(this).children('.caption').stop().fadeTo(500, 0.8);
		$(this).children('.caption_image').animate({ marginLeft: "-=20px", opacity: 1 }, 500);
	},function(){
		$(this).children('.caption_image').animate({ marginLeft: "+=20px", opacity: 0 }, 100);
		$(this).children('.caption').stop().fadeTo(500, 0);
	});