CODEWITHSUNDEEP
jquerytwitter-bootstraptransitionbackground-colorcss-animations
Kasperi Koski
Kasperi Koski

Reputation: 81

How to make fading in background-color transition to bootstrap page using CSS?

I have page A, which bg-color is for ex. #fff. Now when I click a link and proceed to page B, the bg-color is

.body {background-color: #007F46;}

As you might guess, the change from white to this greenish color is quite sudden. Is there any way to make a transition-kind thing that when my page loads, it changes the color automatically from #fff to #color-here at duration X. Doesn't matter if it's accomplished by CSS or jquery.

There is all the :hover stuff, but I don't think that it is very convenient, as my page B might be in a tab of the browser and then every time when you open the that, the color will change.

So in nutshell - anyone have a solution for "page loads" -> "bg-color is white" -> "bg-color changes to green in .5s". -> end of story, no changing again until I reload the page/restart browser.

Upvotes: 3

Views: 13714

Answers (2)

Pete TNT
Pete TNT

Reputation: 8403

jQuery/CSS solution

CSS: Add a class loaded that has the background color you want as the bg color

body {
    height: 500px;
    width: 500px;
    background-color: transparent;
}

body.loaded {
   background-color: green;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

On document ready, add the class loaded to your body

$(document).ready(function(){
    $("body").addClass("loaded");
});

Fiddle: http://jsfiddle.net/R3jjM/

Upvotes: 4

Pseudonym
Pseudonym

Reputation: 2072

Try something like this:

$(document).ready(function() {
    $('.site-wrapper-inner')
        .css({"opacity":0})   
        .delay(200)           
        .css({"opacity":1});  
});

This may result in a flicker but shouldn't be too bad. Basically page loads it gets hidden and then faded back in, in time for the user to notice it

EDIT: To make use of this you will need the following

this should go under your bootstrap.js tag:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

So it ends up looking something like:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('#id_to_fade_in')
            .css({"opacity":0})   
            .delay(200)           
            .css({"opacity":1});  
    });
</script>

That should be enough to get you started

Upvotes: 0

Related Questions