JQuery анимированный зум на Firefox

Question

У меня есть отличный эффект, когда вы наводите указатель мыши на определенный элемент, и он масштабируется больше. Я сделал это просто с помощью:

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

Проблема в том, что это не работает в Firefox :(. Я читал, что Firefox - единственный браузер, который не поддерживает CSS-масштабирование. Кажется очень странным ... так каков наилучший подход к анимации механизма масштабирования с помощью jQuery? выше

Answer 1

Вы можете использовать css transform с масштабом, все в вашем css.

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

Answer 2

Вы можете использовать CSS3-преобразования , например

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

, но в настоящее время вы не можете анимировать их с помощью базового jQuery.

Однако вы можете использовать плагин jQueryдля этого, например jquery.transform.js .

Обратите внимание, что IE9 также поддерживает свойство transform, я нашел некоторую информацию об этом в этом вопросе SO .