8

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

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

赏金编辑

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

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

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

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

现代编辑

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

4

6 回答 6

19

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

一个例子：

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;
}

你可以在这里活着看看。

该示例使用静态颜色给出，但您也可以使用css3 渐变：

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);
}
于 2011-07-23T14:19:50.520 回答
3

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

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

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

如果有人对这些东西有一些想法，我很想听听他们的意见。

编辑：固定

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

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

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

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

于 2011-10-20T20:08:32.330 回答
1

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

于 2011-10-18T18:09:12.650 回答
0

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

<!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 渐变。不过还是..

于 2011-07-24T06:26:51.960 回答
0

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

于 2011-10-22T03:41:51.237 回答
-1

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

从 GitHub 下载

这个插件有 3 个选项。

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

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

于 2011-11-16T05:49:17.857 回答