如何在 jQuery 中创建缩放效果

Question

我有以下CSS 转换：http://jsfiddle.net/cW3Ts/

这一直在跳跃并且在某些浏览器中不兼容/错误，所以我想使用jQuery 创建它。我已经将fadeIn 排序为这样（示例）：

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

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

如果我研究了一整天并且几乎准备放弃，我将不胜感激！

Answer 1

您可以使用jQuery animate，但我认为对于支持它们的浏览器，css 过渡看起来更流畅。您可能需要考虑使用条件注释或类似的东西，以便仅在必要时使用脚本。

Working Example

$('.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]-->