jQuery动画图像twiching

我有一个用JS动画图像的问题。当我只动画width和height它工作正常。当我向其添加top/marginTop或left/marginLeft时会发生问题。我想使用它的原因是缩放效果。但我认为它首先加入width和height，比它增加top/left值。它会产生看起来不好的“抽动”效果，我无法摆脱它。jQuery动画图像twiching

这里工作的例子我简单的滑块为http：//łuckoś.pl/slider/

我什么都试过，连jQuery.fx.interval = 50;

感谢您的时间

来源

2012-08-01 Trouble

为了获得更好的结果，你必须使用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/

来源

2012-08-03 07:28:35 tekilatexee

这不是我所需要的，但是谢谢你，我终于有了额外的部分来移动缩放位置，它是'translate（5em，0）;'这样我可以移动随机变焦:)谢谢，为了jsfiddle和你的时间！ – Trouble 2012-08-03 11:14:49

我有一个问题。这种动画在IE中不起作用（目前正在测试IE 8）。但是'http：// codecanyon.net/item/estro-jquery-ken-burns-slider-wordpress-plugin/full_screen_preview/356713'可以工作，这是我想要的效果。你可以看一下吗？ – Trouble 2012-08-06 13:43:09

我想你需要使顶部位置的左边位置和高度成比例地动画宽度。当你缩小2px的宽度时，你从1px左移。

来源

2012-08-01 08:29:39 tekilatexee

我由图像的有效计数比率加入的值，加入100宽度即使当移动它50到左（因此它应该留在原处并垂直缩放）它是“抽搐“ – Trouble 2012-08-01 08:51:52

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

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

我认为IE相当于是-ms-transform但我还没有scale用过它。

来源

2012-08-01 08:31:24

这很好，谢谢，但我仍然无法将放大的图像移动到顶部/左侧。在我的'animate'函数中，随机移动缩放图像。 'top/left'是“Twiching”agian – Trouble 2012-08-01 09:00:15

jQuery动画图像twiching

回答

相关问题