Question

我有一个很好的效果，你将鼠标悬停在一个特定的元素上，它会扩展得更大。我这样做的只是：

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

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

Answer 1

您可以在css中使用带有缩放比例的css转换。

#element_to_scale {
    -moz-transition: transform 0.5s linear 0s;
}
#element_to_scale:hover {
    -moz-transform: scale(2);
}

Answer 2

您可以使用CSS3 transforms，例如

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

，但目前你无法使用基本的jQuery为它们制作动画。

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

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

在Firefox上的jQuery动画缩放

2 个答案: