Firefox 上的 jQuery 动画缩放

Posted 2023-03-06

【中文标题】Firefox 上的 jQuery 动画缩放

【英文标题】：jQuery animated zoom on firefox

【发布时间】：2011-07-17 08:15:23

【问题描述】：

我有一个很好的效果，你将鼠标悬停在一个特定的元素上，它会放大。我这样做很简单：

$('#element_to_scale').live('mouseenter', function() 
    $(this).stop().animate(zoom: 2);
).live('mouseleave', function() 
    $(this).stop().animate(zoom: 1);
);

问题是这在 firefox 上不起作用 :(。我现在读到 firefox 是唯一不支持 css 缩放的浏览器？看起来很奇怪......那么使用 jQuery 动画缩放机制的最佳方法是什么上面？

【问题讨论】：

CSS3 转换应该对您有所帮助。

@bazmegakapa，我可以用 jQuery 轻松地为 css3 转换制作动画吗？

AFAIK 没有，但有一个轻量级插件：github.com/lrbabe/jquery.transform.js

根据这些信息创建了一个答案。

【参考方案1】：

你可以使用CSS3 transforms，点赞

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

，但目前您无法使用基本的 jQuery 为它们设置动画。

但是，您可以为此使用 jQuery 插件，例如 jquery.transform.js。

请注意，IE9 也支持transform 属性，我在this SO question 中找到了一些相关信息。

【参考方案2】：

您可以在您的 css 中按比例使用 css 转换。

#element_to_scale 
    -moz-transition: transform 0.5s linear 0s;

#element_to_scale:hover 
    -moz-transform: scale(2);

【讨论】：

嗯，这绝对有效，但不是动画。它只是立即弹出。我想我必须用 setInterval 实现我自己的动画机制？

只是阅读一些 Firefox 文档，看起来转换 0.5s 应该对此进行动画处理，但仅适用于 Firefox 4.0，而我有 3.6。

FF4 将于下周发布 ;)。我认为您应该使用 Modernizr 之类的东西检测“转换”和“转换”规则支持，并在不完全支持时使用 jQuery。

缩放是 CSS 标准的一部分吗？ ff4 现在支持缩放吗？如果不是，我应该用什么标准方式来处理跨浏览器的缩放？

这并不完全接近 OP 的要求。它甚至不兼容跨浏览器。