jQuery Animate 图像抽动

Posted 2023-05-08

【中文标题】jQuery Animate 图像抽动

【英文标题】：jQuery Animate image twiching

【发布时间】：2012-07-30 02:02:00

【问题描述】：

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

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

我什么都试过了，即使是jQuery.fx.interval = 50;

感谢您的宝贵时间

【参考方案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/

【讨论】：

这不是我需要的，但谢谢你，我终于得到了移动缩放位置的附加部分 translate(5em,0); 这样我可以随机移动缩放 :) 感谢 jsfiddle 和你的时间！

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

【参考方案2】：

我认为您需要将宽度与左侧位置和高度与顶部位置成比例地设置动画。当你减少 2px 的宽度时，你会从 1px 向左错开。

【讨论】：

我通过图像的有效计数比率添加了值，即使添加 100 宽度将其向左移动 50（因此它应该保持原位并垂直缩放）它是“抽搐”

【参考方案3】：

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

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

我认为 IE 等效项是 -ms-transform，但我没有将它与 scale 一起使用。

【讨论】：

这很好，谢谢，但我仍然无法将缩放后的图像移动到顶部/左侧。在我的animate 函数中，随机移动缩放图像。 top/left 是“Twiching”agian