vendredi 24 juin 2016
Body background color not transitioning as other divs
I am playing with front-end recently at FreeCodeCamp.
When doing a quote distributor, I managed to make elements background-color transition, but not the body, even if I applied the same transitions.
The Pen from Codepen is here : https://codepen.io/louis__/pen/dXpwLx
The html :
<body class="color-front">
<div class="container-fluid color-back">
<div class="jumbotron"></div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div id="main" class="container-fluid">
<div class="quote color-front"><a class="fa fa-quote-left color-front"></a> <span id="quote">Ceci est ma citation de départ, elle est peut-être toujours un peu courte !</span> <a class="fa fa-quote-right color-front"></a></div>
<p class="text-right quote color-front">- <b><span id="author">Me</span></b></p>
<div class="row">
<div class="col-md-3 text-left">
<a href="#" class="fa fa-twitter low social color-back"></a>
</div>
<div class="col-md-5"></div>
<div class="col-md-4">
<button id="newquote" class="low change text-center color-back">New Quote</button>
</div>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<div id="footer" class="container-fluid color-back">
<div class="jumbotron"></div>
</div>
</body>
Parts of interest from
- the css :
.color-back {
background-color: blue;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
.color-front {
-webkit-transition: color 1000ms linear;
-moz-transition: color 1000ms linear;
-o-transition: color 1000ms linear;
-ms-transition: color 1000ms linear;
transition: color 1000ms linear;
color: blue;
font-color: blue !important;
}
body {
transition: background-color 1000ms linear;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
}
and the JQuery :
var i = 0;
$(document).ready(function()
{
$("#newquote").on("click", function()
{
$("body").css("background-color", quotes[i].color);
$("#quote").html(quotes[i].quote);
$("#author").html(quotes[i].author);
$(".color-back").css("background-color", quotes[i].color);
$(".color-front").css("color", quotes[i].color);
i = (i + 1)%quotes.length;
});
});
Any help will be appreciated, I am new to front-end development, and I still do not fully understand the inner logic of it.
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire