jquery .animate - image gets cropped during animation

Question

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.

Answer 1

from this code, it looks like you have your images inside containers

if this is the case, perhaps you resize the container, but not the image itself.

this would cause cropping if the container had overflow:hidden; in css

but to be sure we'd need to see the css and basic html structure that goes with this code