CODEWITHSUNDEEP
javascriptjqueryhtmlcsstransition
Axel K
Axel K

Reputation: 323

Transitioning between classes not working (CSS & jQuery)

SOLVED

(Check bottom of this post for solution)

The effect I'm trying to achieve is a transition between two background gradients. It should happen smoothly (not just instantly). This is my go at it, which apparently does not work for some reason. My idea is that I have two classes with different color properties and then jQuery should handle the transition between them.

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>

The div with the id backgroundGradientDay is the target for the transition.

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

According to the jQuery documentation the switchClass should be able to do the transition: http://api.jqueryui.com/switchclass/

As it is now the switchClass() does change the class, but there is no transition.

Upvotes: 0

Views: 152

Answers (2)

Axel K
Axel K

Reputation: 323

SOLUTION

I managed to solve this by instead animating an "opacity" property and using one div for each gradient - crossfading between the two. Check out this jsFiddle for the solution: http://jsfiddle.net/s99h6/4/

Upvotes: 0

user924016
user924016

Reputation:

Change <div id="backgroundGradientDay"></div> to <div class="backgroundGradientDay"></div>

Then change your css from #backgroundGradientSunset and #backgroundGradientDay to .backgroundGradientSunset and .backgroundGradientDayas these are classes.

This you need to do before you can use the switch class.

You can instead of using Jquery for the transition effect use css transition. If you use CSS for the transition (beware on bendor prefixes) simple add some transition rules on your classes. See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions for more on css transitions and how to apply them

EDIT:

transition gradients are not supported by most browsers yet. No worries it will be.

Upvotes: 1

Related Questions