解决

Question

解决

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

我想要达到的效果是两个背景渐变之间的过渡。它应该顺利进行（不仅仅是即时）。这是我的理由，显然由于某种原因不起作用。我的想法是我有两个具有不同颜色属性的类，然后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（）确实改变了类，但没有转换。

Answer 1

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

然后从#backgroundGradientSunset和#backgroundGradientDay更改您的CSS 至.backgroundGradientSunset和.backgroundGradientDay，因为这些是类。

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

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

编辑：

大多数浏览器尚不支持

转换渐变。不用担心会这样。

Answer 2

解

我设法解决这个问题，而不是动画一个＆＃34; opacity＆＃34;属性并为每个渐变使用一个div - 两者之间的交叉渐变。查看此jsFiddle以获得解决方案：http://jsfiddle.net/s99h6/4/

类之间的转换不起作用（CSS＆amp; jQuery）

解决

HTML

CSS

jQuery（“väderscriptUtseende.js”）

2 个答案:

解