jquery .animate - l'image est recadrée pendant l'animation

Question

Je suis en train de programmer un carrousel avec javascript en utilisant la librairie jquery. Fondamentalement, il y a trois images montrées, l'image centrale étant plus grande que les deux autres. En allant à gauche ou à droite, les images centrales sont redimensionnées de 115px * 115px à 50px * 50px et lues à gauche ou à droite, en fonction de l'entrée de l'utilisateur.

Le problème est que lorsque le redimensionnement se produit, l'image centrale devient recadrée progressivement jusqu'à ce qu'il atteigne la 50px * 50px puis retour à un état normal: http://www.filedropper.com/imggetscropped

Javascript est comme suit:

$("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}); 

Les images utilisées sont png avec transparence.

Answer 1

de ce code, il semble que vous avez vos images à l'intérieur des conteneurs

si tel est le cas, peut-être vous redimensionnez le conteneur, mais pas l'image elle-même.

cela provoquerait un recadrage si le conteneur avait un débordement: caché; dans css

mais pour être sûr que nous aurions besoin de voir le css et la structure html de base qui va de pair avec ce code