Transitioning between classes not working (CSS & jQuery)

Question

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.

(Dont type `ä` in a filename. BUt irrelevant to this problem) — Martijn, May 03 '14 at 09:59
@dborghez I tried to create one but I've never used it before so I'm not sure how to do it, could you make one to show me how it's done :)? (Using my above code). Thanks! — Axel K, May 03 '14 at 10:01
Considered just switching the class and using css transition? Also it seems your classes are ID's ( #name ) not class ( .name ) — Ronni Skansing, May 03 '14 at 10:02
@RonniSkansing Would that work well together with JavaScript? I need it to change background at a specific time of day (which I will check using JS) — Axel K, May 03 '14 at 10:03
@AxelK yes it would work with no problem. Switch the class with JS and the CSS will take care of the transition between the two states. BUT in your code the issue is that your are using ID, not CLASS. Your css should be with . not # and it should be set in class=" not id=" — Ronni Skansing, May 03 '14 at 10:04
@RonniSkansing Cool! How would I set up my transition code? I'm quite new to this. — Axel K, May 03 '14 at 10:07
A general tip - name your files using regular latin alphanumeric characters only (so there is no `ä` in the file name). — PhistucK, May 03 '14 at 10:10

Ronni Skansing · Answer 1 · 2014-05-04T12:50:58.660

1

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.

edited May 04 '14 at 12:50

answered May 03 '14 at 10:10

Ronni Skansing

1,494
1
17
33

Which browser are you using? You need to set the browser specific vendors – Ronni Skansing May 03 '14 at 10:41
There are a couple of things. 1. the fidle has $("#backgroundGradientDay") it should be $(".backgroundGradientDay"). 2. There seems to be output an error when calling switchClass. 3. You need to add vendor specific css for the transition, like -webkit-transition and etc – Ronni Skansing May 03 '14 at 10:46
Output error? When I click "JSHint" it says the JS is OK. It seems though like it is no longer switching the class. I changed the other two things you mentioned and it is still not working. http://jsfiddle.net/s99h6/2/ – Axel K May 03 '14 at 10:55
jsfiddle was giving some errors. After abit of reading it is because the css gradient does not support transition. See http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds also i created the fiddle in plunker instead, take a look @ http://plnkr.co/edit/BGDyiJCeO3R8frmfngc0?p=preview also made a few changes so you can see how the transition works (and added a timeout on the script) – Ronni Skansing May 03 '14 at 11:07
Managed to solve it in another way, since transitions of gradients don't really work. Check the question post again – Axel K May 03 '14 at 11:12
Yes, although you new solution really has nothing to do with what you asked, it is simple crossfading on two different divs. anyways Please add your own answer and accept it, accept mine or delete the question =] – Ronni Skansing May 04 '14 at 12:50

score 0 · Answer 2 · answered May 04 '14 at 13:13

0

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/

answered May 04 '14 at 13:13

Axel K

283
1
5
11

Transitioning between classes not working (CSS & jQuery)

SOLVED

HTML

CSS

jQuery ("väderscriptUtseende.js")

2 Answers2

SOLUTION