Question

我在使用JS动画图像时遇到问题。当我仅动画width和height时，它可以正常工作。当我向其添加top/marginTop或left/marginLeft时出现问题。我想要使用它的原因是缩放效果。不过，我认为首先添加width和height，而不是添加top/left值。它产生“抽搐”效果，看起来很糟糕，我无法摆脱它。

这是我的简单滑块http：//łuckoś.pl/slider/

的工作示例

我尝试了所有内容，甚至是jQuery.fx.interval = 50;

谢谢你的时间

Answer 1

为了获得更好的结果，您必须使用以下CSS属性：

#container{
    overflow:hidden;
    width:489px;
    height:178px;
    position:relative;

}
#container img{
    position:relative;
    margin:auto;
    -webkit-transition: all 4s ease-out;
    -moz-transition: all 4s ease-out;
    -o-transition: all 4s ease-out;
    transition: all 4s ease-out;
}

#container img.zoom { 
   -moz-transform: scale(2);
   -webkit-transform: scale(2);
   -o-transform: scale(2);
   transform: scale(2);
   -ms-transform: scale(2);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
   M11=2, M12=-0, M21=0, M22=2);
}

和javascript：

$().ready(function(){
    $('img').addClass('zoom');
});

添加缩放类时，图像将缩放为4个secondes中的2个。

请参阅完整演示：http://jsfiddle.net/rNY6T/18/

Answer 2

我认为您需要使用左侧位置和顶部位置的高度按比例设置宽度。当你减小2px的宽度时，你会从1px向左错开。

Answer 3

当您需要缩放时..添加此..

-moz-transform: scale(2); 
-webkit-transform: scale(2);
-o-transform: scale(2);

我认为IE等价物是-ms-transform，但我没有将其与scale一起使用。

jQuery Animate图像抽搐

3 个答案: