jquery .animate -图像在动画过程中被裁剪

Question

我目前正在使用jquery库编写一个使用javascript的carousel。基本上，显示了三个图像，中心图像比其他两个图像大。在向左或向右移动时，中心图像的大小将从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中

但为了确保这段代码，我们需要查看css和基本的html结构。