【问题标题】：Transitioning between classes not working (CSS & jQuery)类之间的转换不起作用（CSS 和 jQuery）
【发布时间】：2014-05-03 09:57:16
【问题描述】：

已解决

（查看本文底部的解决方案）

我想要达到的效果是两个背景渐变之间的过渡。它应该顺利发生（不仅仅是立即）。这是我的尝试，但由于某种原因显然不起作用。我的想法是我有两个具有不同颜色属性的类，然后 jQuery 应该处理它们之间的转换。

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="vädermain.css">

        <!--jQuery library-->
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <!--jQuery UI library-->
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <!--jQuery for design-->
        <script src="väderscriptUtseende.js"></script>
    </head>

    <body>
        <div class="backgroundGradientDay">
        </div>

    </body>
</html>

id 为 backgroundGradientDay 的 div 是过渡的目标。

CSS

/*Gradient used at daytime*/
.backgroundGradientDay {
    height: 1000px; width: 110%; margin: -10px;
    background: -webkit-linear-gradient(#00DFFF, #002A6B); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#00DFFF, #002A6B); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#00DFFF, #002A6B); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#00DFFF, #002A6B); /* Standard syntax (must be last) */
}

/*Gradient used in the evening*/
.backgroundGradientSunset {
    height: 1000px; width: 110%; margin: -10px;
    background: -webkit-linear-gradient(#FF7900, #FF0000, #6B0000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FF7900, #FF0000, #6B0000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FF7900, #FF0000, #6B0000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FF7900, #FF0000, #6B0000); /* Standard syntax (must be last) */
}

jQuery ("väderscriptUtseende.js")

    //This script only affects design (not data) of the page
$(document).ready(function(){
    //Switch from day to evening
    $(".backgroundGradientDay").switchClass("backgroundGradientDay", "backgroundGradientSunset", 1000, "easeInQuad");
});

根据 jQuery 文档，switchClass 应该能够进行转换：http://api.jqueryui.com/switchclass/

现在 switchClass() 确实改变了类，但没有转换。

【问题讨论】：

你能提供一个小提琴吗？
（不要在文件名中输入ä。但与此问题无关）
@dborghez 我试图创建一个，但我以前从未使用过它，所以我不知道该怎么做，你能做一个告诉我它是如何完成的:)？（使用我上面的代码）。谢谢！
考虑切换类并使用 css 过渡？此外，您的班级似乎是 ID（#name）而不是班级（.name）
@RonniSkansing 这可以与 JavaScript 一起使用吗？我需要它在一天中的特定时间更改背景（我将使用 JS 进行检查）

标签： javascript jquery html css transition

【解决方案1】：

将<div id="backgroundGradientDay"></div> 更改为<div class="backgroundGradientDay"></div>

然后将您的 css 从 #backgroundGradientSunset 和 #backgroundGradientDay 更改到.backgroundGradientSunset 和.backgroundGradientDay，因为它们是类。

在使用 switch 类之前你需要这样做。

您可以使用 css 过渡来代替使用 Jquery 的过渡效果。如果您使用 CSS 进行过渡（注意弯曲前缀），只需在您的类中添加一些 transition 规则。见https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions 更多关于 CSS 过渡以及如何应用它们

编辑：

大多数浏览器还不支持过渡渐变。不用担心。

【讨论】：

您使用的是哪个浏览器？您需要设置浏览器特定的供应商
有几件事。 1. 小提琴有 $("#backgroundGradientDay") 它应该是 $(".backgroundGradientDay")。 2、调用switchClass时好像有输出错误。 3. 您需要为过渡添加供应商特定的 css，例如 -webkit-transition 等
输出错误？当我单击“JSHint”时，它说 JS 没问题。似乎它不再切换班级。我更改了您提到的其他两件事，但仍然无法正常工作。 jsfiddle.net/s99h6/2
jsfiddle 出现了一些错误。稍稍阅读后是因为 css 渐变不支持过渡。请参阅stackoverflow.com/questions/6542212/…，我也在 plunker 中创建了小提琴，看看@plnkr.co/edit/BGDyiJCeO3R8frmfngc0?p=preview 也进行了一些更改，以便您可以看到转换是如何工作的（并在脚本上添加了超时）
设法以另一种方式解决它，因为渐变的过渡并不真正起作用。再次检查问题帖子

【解决方案2】：

解决方案

我设法解决了这个问题，而是为“opacity”属性设置动画并为每个渐变使用一个 div - 在两者之间交叉淡入淡出。查看这个 jsFiddle 的解决方案：http://jsfiddle.net/s99h6/4/

【讨论】：