jquery .animate - アニメーション中に画像が切り取られる

Question

現在、jqueryライブラリを使用してJavaScriptを使用したカルーセルをプログラミングしています。基本的に、3つの画像が示され、中央の画像は2つの画像よりも大きい。左または右に行くと、中央の画像は、ユーザーの入力に応じて、115px * 115pxから50px * 50pxにリサイズされ、左右に振られます。

問題はサイズ変更が発生したときに、中央の画像が徐々にそれはは50pxの*のは50pxに達するまでトリミングして、より正常な状態に復帰されることを示します。 http://www.filedropper.com/imggetscropped

Javascriptが以下の通りである：

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

使用される画像は透過性を持つpngです。

Answer 1

このコードからあなたは、このような場合には、おそらくあなたは、コンテナではなく、画像自体のサイズを変更するコンテナ

内部のあなたのイメージを持っているように、それが見えます。

これは、コンテナにオーバーフローがあった場合にクロッピングを引き起こします。 CSS

で私たちは、このコード