两个（类）和（类）之间的平滑过渡：hover答案

【问题标题】：Smooth transition between two (class) and (class):hover两个（类）和（类）之间的平滑过渡：hover
【发布时间】：2011-10-11 16:07:33
【问题描述】：

有没有一种脚本/方式可以让普通的 CSS :hover 更流畅？

想法是，你有两个类可能具有渐变背景，并且脚本会平滑地交换这些类。所以渐变看起来就像你按下一个按钮。应该是自动的，所以你调用触发器：$('.someclass').SmoothTransition();，它会自动使用.someclass:hover作为第二类。

赏金编辑

这实际上是一个非常有趣的问题，我得到了部分答案。我的答案的问题在于，它仅适用于纯色背景色，不适用于 CSS 渐变或任何其他更具体的参数。

这个脚本应该是任何 jQuery 开发人员库中的“必备”。因此，我向任何能够想到方法或找到好的资源的人提供 150 个代表，并且可以做到这一点。

如果您的方法（单个 jQuery 插件）适用于所有这些示例，那么您就赢了！

示例：http://jsfiddle.net/4pYWD/

现代编辑

自从 2011 年提出这个问题以来，当 CSS 过渡时，商业游戏不是一个选项。然后明白，为什么在这个问题中一切都集中在 JS 而不是 CSS 上。根据这些答案，我开发了一个 JS 脚本，在当时是完美的。它不再是，CSS 过渡现在是最终的解决方案，所以正确的答案得到了重新接受。

【问题讨论】：

标签： jquery class transition smooth

【解决方案1】：

您可以使用css3 transitions 来实现这一点。

一个例子：

a {
    color: blue;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

a:hover {
    color:yellow;
}

你可以看看这个活着的here。

该示例使用静态颜色，但您也可以使用css3 gradients：

a {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}

a:hover {
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

【讨论】：

这似乎只是 FF4+。这有点问题。
哎呀我忘了提。好吧，如果它不是您项目中的必备要求，您可以让旧浏览器的用户没有平滑过渡，因为它不会影响可访问性。实际上，在某些项目中，为此维护 JS 代码是不值得的。
从技术上讲，这是用于管理区域，但对于所有类型的项目，通常都非常需要这种方法。
不，并非所有浏览器都支持过渡，但是，您可以使用 Modernizr 来测试它，并提供 jQuery 后备以防万一。
@bluefoot 你应该有一个transition: 正弦线，希望它最终会成为规范。

【解决方案2】：

http://jsfiddle.net/btleffler/MZ6T8/

适用于 Chrome、Windows 版 Safari 和 Opera。 Firefox 和 IE 对 CSSRules 对象的支持很差，所以结果充其量是不确定的。我会继续努力，看看我是否可以解决问题。

css 样式也需要调整。由于在最后一个示例中没有为 :hover 选择器分配背景颜色，因此新元素上没有背景颜色。

如果有人对这些东西有什么想法，我很想听听。

编辑：已修复

http://jsfiddle.net/btleffler/JfPBS/

这个效果更好。我搜索:hover 选择器的所有css 规则，然后保存与该规则关联的CSS 文本，并将非:hover 规则保存为可以插入$().css() 的javascript 对象。之后，我通过使用$.extend() 将悬停类扩展到普通类来计算实际的“悬停类”。这样，如果:hover 类中没有定义背景，它仍将具有普通类的背景。

最后，我创建了一个元素，并将其直接放置在原始元素下方，摆脱 CSS 处理悬停的原因，将我的正常样式添加到原始元素，并将我计算的悬停样式添加到它下面的新元素。

之后我们需要做的就是为鼠标事件的不透明度设置动画。简单！

【讨论】：

我在想，如果不是严格使用 CSSStyleRule 对象，我可以直接将它们的样式复制到元素中。这种方式可能更简单，并且应该在其他浏览器中工作得更好。
已修复。适用于 Chrome、Firefox、Opera 和 IE！
老兄，不错！我记得很少有人回来，当我为 50 个赏金创建一些核心插件时：D 我想业力得到了回报。我基本上不会分析它，第一眼看到它就满足了我给定的所有要求，我可以看到插件的工作量。你直接赢了！ ID 和 CSSRule 问题很小，可以绕过。谢谢一千！ :)
不客气！这对我来说是一次学习经历。非常有趣的问题。我希望有更多的人来玩弄这个想法。
好吧，如果您同意，那么人们可以对其进行修改和改进。这迟早会被 jQuery 人接受，并希望它会被包含在 jQuery 核心中。因为，我想大多数看到这个问题的人都会同意..这样的插件确实有很高的需求。

【解决方案3】：

http://desandro.github.com/motion-emotion/ 这个项目允许在除 ie7 和 ie6 之外的所有主要浏览器中进行转换。它对这两种浏览器进行了渐进式增强

【讨论】：

【解决方案4】：

所以我正在寻找的解决方案是这样的：

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script>
    $(document).ready(function() {
        $("p").hover(function () {
            $(this).toggleClass("blue", 1000);
        });
    });
</script>
<style>
    p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; color: white; background: yellow;}
    .blue {background: blue;}
</style>
</head>
<body>
<p class="">Hover over this</p>
</body>
</html>

观看现场演示：http://jsfiddle.net/hobobne/uRJWG/

注意：不适用于 css3 渐变。不过还是……

【讨论】：

我认为这与另一件事有关。
您可能想接受自己的问题，因为这是您解决问题的方式。检查faq

【解决方案5】：

这真的很粗糙，但我有一个fiddle，它应该（理论上）可以跨浏览器和你想要的任何图像工作。现在它有点 hacky （非常阅读），但它是一个很好的起点，并且可能会让人们获得完整的答案。此外，如果您快速执行此操作，它目前不起作用。在鼠标离开元素之前，按钮必须完全淡入或淡出。就像我说的，hacky 只是一个开始。

【讨论】：

【解决方案6】：

我终于找到了在悬停时平滑过渡的最终极方法。我希望这会帮助其他有同样问题的人。我目前的测试表明，这对于我能想出的所有示例都 100% 有效。适用于超链接和普通容器。

Download from GitHub

这个插件有 3 个选项。

showSpeed: [number] - 缓动动画速度
hideSpeed： [number] - 缓出动画速度
includeText: [boolean] - 确定是否使用元素中的 html

如果您对如何优化此插件有任何想法，请联系我或发表评论:)

【讨论】：

由于这是2011年，当转换支持有限时，此答案非常过时并在CSS中转换，是最终的方法。然后我重新接受了这个问题，CSS 回答。