Jquery changing background color with smooth transition

Question

I figured out how to change my background color with Jquery upon clicking a button, but I don't know how to ease the transition. I have tried the .css method in order to add the transition. It doesn't work.

Here is my Jquery to add the new color to the background, it works:

$("#playbtn").click(function(){
  $("#container").css("background", "#3953A0");
  $("#container").css("background", "-webkit-linear-gradient(to left, #3953A0, #2A3C70)");
  $("#container").css("background", "linear-gradient(to left, #3953A0, #2A3C70)");
  $("#container").css("background", "-moz-linear-gradient(to left, #3953A0, #2A3C70)");
  $("#container").css("filter", "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3953A0', endColorstr='#2A3C70',GradientType=1 )");
});

my basic #container css:

#container {
  width: 100%;
  min-height: 100%;
  position: fixed;
  background: #00C9FF; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #2A3C70 , #718DE2); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #2A3C70 , #718DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
  background: -moz-linear-gradient(left, #2A3C70 , #718DE2); /* For Firefox 3.6 to 15 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2A3C70', endColorstr='#718DE2',GradientType=1 ); /* IE6-9 */
}

Hope you guys can help me!

`transition: background-color 1s linear` [Demo](https://jsfiddle.net/qczayj4w/1) — Derek 朕會功夫, Sep 01 '16 at 18:30
@Derek朕會功夫 Yes I told in the question that this doesn't work... — Tripduc, Sep 01 '16 at 18:32
You can't transition a gradient....for one thing it's not a color...it's treated as an image. — Paulie_D, Sep 01 '16 at 18:32
Look at jQuery UI -- if you are going to go the js route: http://jqueryui.com/animate/ — Spencer Rohan, Sep 01 '16 at 18:34

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

Pretty sure this is a duplicate of this: jQuery animate backgroundColor, but I can't mark the question.

Basically, you're wanting .animate()

edited May 23 '17 at 10:29

Community

1
1

answered Sep 01 '16 at 18:35

Charles

640
5
21

score 0 · Accepted Answer · answered Sep 01 '16 at 18:36

To transition CSS, you will need the transition property on the element. I recommend using CSS to handle all the changes via classes, and use jQuery to toggle the css class. This is easier to work with and gives you more control!

CSS:

#container {
  width: 100%;
  min-height: 100%;
  position: fixed;
  background: #00C9FF; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #2A3C70 , #718DE2); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #2A3C70 , #718DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: -moz-linear-gradient(left, #2A3C70 , #718DE2); /* For Firefox 3.6 to 15 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2A3C70', endColorstr='#718DE2',GradientType=1 ); /* IE6-9 */

  /*
  Play with transition settings (time, ease type)
  */
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#container.is-active {
  background: #3953A0; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #3953A0, #2A3C70); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #3953A0, #2A3C70); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: -moz-linear-gradient(to left, #3953A0, #2A3C70); /* For Firefox 3.6 to 15 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3953A0', endColorstr='#2A3C70',GradientType=1 ); /* IE6-9 */
}

JS:

$("#playbtn").click(function(){
  $("#container").addClass("is-active");
});

Thanks, I thought about this but was lazy to create a second class... :) — Tripduc, Sep 01 '16 at 20:38

Jquery changing background color with smooth transition

2 Answers2