Hello all,

I am currently programming a carousel with javascript using the jquery library. Basically, there are three images shown, the central image being bigger than the two others. Upon going left or right, the central images is resized from 115px*115px to 50px*50px and tossed left or right, depending on the user input.

The problem is that when the resize happens, the central image gets gradually cropped until it reaches the 50px*50px and then return to a more normal state: http://www.filedropper.com/imggetscropped

Javascript is as follow:

$("div#carousel .item:eq(2)").animate({'width':'50px', 'height':'50px', 'opacity':'0.5'}, {queue:false, duration:900});  
$("div#carousel .item:eq(2) img").animate({'width':'50px', 'height':'50px', 'marginTop': '30px'}, {queue:false, duration:900});  
$("div#carousel .item:eq(1)").animate({'width':'115px', 'height':'115px', 'opacity':'1'}, {queue:false, duration:900});  
$("div#carousel .item:eq(1) img").animate({'width':'115px', 'height':'115px', 'marginTop': '0px'}, {queue:false, duration:900});  
$("div#carousel .item:not(eq(2))").animate({'left':'+=56px'}, {queue:false, duration:900});  
$("div#carousel .item:eq(2)").animate({'left':'+=122px'}, {queue:false, duration:900, complete: carousel.toggleInput});  

Images used are png with transparency.