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