如何在jQuery中创建缩放效果

Question

我得到了以下CSS转换：http://jsfiddle.net/cW3Ts/

这一直在跳跃，并且在某些浏览器中不兼容/有bug，所以我想使用jQuery创建它。我已经对fadeIn进行了这样的排序（示例）：

$(this).animate({backgroundColor: '#58a5e1'}, 400);

不幸的是，我发现在悬停时很难伸缩div。我尝试过设置高度和宽度的动画，但这确实产生了相同的效果。我还研究了jQuery UI缩放，当悬停时，我无法使缩放在dic上工作，他们的示例显示了一个切换，它只是完全破坏了悬停功能。有人知道我可以使用的解决方案或插件吗？这样我就可以获得与CSS类似的效果（缩放和轻松）。

我会非常感激，因为我已经研究了一整天，几乎准备放弃了！

Answer 1

您可以使用jQuery animate，但我认为css转换对于支持它们的浏览器来说要平滑得多。您可能需要考虑使用条件注释或类似的东西，以便仅在必要时使用脚本。

工作示例

$('.cta').hover(function () {
    $(this).removeClass('dark-grey-bg', 800).addClass('blue-bg-fade', 400).animate({
        height: $(this).height() * 1.05,
        width: $(this).width() * 1.05
    }, 300);
    $(this).find('a').removeClass('grey').addClass('white').animate({
        fontSize: '105%'
    }, 300);
}, function () {
    $(this).addClass('dark-grey-bg', 400).removeClass('blue-bg-fade', 800).animate({
        height: $(this).height() / 1.05,
        width: $(this).width() / 1.05
    }, 300);
    $(this).find('a').removeClass('white', 400).addClass('grey', 800).animate({
        fontSize: '100%'
    }, 300);
});

下面是一个条件注释的例子，它应该适用于IE9和以下

<!--[if lte IE 9]>
    // insert script here
<![endif]-->