Question

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

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

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

不幸的是，我发现在悬停时难以扩展/缓解div。我尝试过动画高度和宽度，但这确实产生了相同的效果。我还查看了jQuery用户界面缩放，我无法在悬停时使用刻度盘，他们的示例显示了一个切换，它只是完全打破了悬停功能。有没有人知道我可以使用的解决方案或插件，所以我可以获得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]-->

如何在jQuery中创建缩放效果

1 个答案: