0

我有以下CSS过渡：http: //jsfiddle.net/cW3Ts/

这一直在跳跃，并且在某些浏览器中不兼容/错误，所以我想使用jQuery. 我有fadeIn这样的排序（示例）：

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

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

我将非常感激，因为我整天都在研究并且几乎准备放弃！

4

1 回答 1

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]-->
于 2013-08-13T18:44:46.430 回答