jquery - 同时使用 CSS 过渡和 jQuery 动画

Question

我正在试验 CSS 过渡和 jQuery UI 函数。在我回答我的问题之前，请查看以下演示。

1. 当您将鼠标悬停在此页面中的链接上时出现的效果仅使用CSS 过渡完成。

2. 在这个页面中，我只使用jQuery 创建了相同的效果（注释掉了 CSS 转换规则）。

3. 在这里，我只保留了 CSS 和 jQuery 代码原样，并注意到由于在 CSS 和 jQuery 中触发了两个事件（我认为），动画有相当大的延迟。

现在我的问题是我怎样才能同时保留它们并在用户的浏览器中有效地使用一种方法？例如，

• 当用户打开页面并且他的浏览器 禁用了 JavaScript时，它会运行 CSS 方法。
• 如果用户的浏览器不支持 CSS 过渡，它会运行 JavaScript 方法。

我怎样才能做到这一点？

编辑 : : 我阅读了有关 Modernizer 的信息，但如果在用户的浏览器中禁用 JavaScript，它不会有太大的好处。

Answer 1

你考虑过使用Modernizr吗？

if(!Modernizr.csstransitions) { // Test if CSS transitions are supported
            $(function() {
                //animate
            });
        }