0

我在用 JS 为图像设置动画时遇到问题。当我只制作动画width并且height效果很好时。当我添加top/marginTop, 或添加left/marginLeft到它时会出现问题。我想使用它的原因是缩放效果。但是我认为它首先是添加widthand height，而不是添加top/left值。它会产生“抽搐”效果，看起来很糟糕，我无法摆脱它。

这是我的简单滑块 http://łuckoś.pl/slider/ 的工作示例

我尝试了一切，甚至jQuery.fx.interval = 50;

感谢您的时间

4

3 回答 3

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 秒内缩放到 2。

查看完整演示：http: //jsfiddle.net/rNY6T/18/

于 2012-08-03T07:28:35.050 回答
0

I think you need to animate the width proportionally with the left position and height with the top position. As you reduce the width of 2px, you stagger from 1px to the left.

于 2012-08-01T08:29:39.150 回答
0

当你需要缩放..添加这个..

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

我认为 IE 等价物是-ms-transform，但我没有将它与scale.

于 2012-08-01T08:31:24.583 回答