How to fade the transition between background colors in a div?

Question

How can I fade the transition between background colors in a div?

I have not been able to do it with my code and I can't find a solution anywhere. Can someone please help me? Thanks for now.

$(document).ready(function() {
  var containerColors = [{
      "background": "linear-gradient(to top right, #1abc9c, #3498db)"
    },
    {
      "background": "linear-gradient(to top right, red, blue)"
    }
  ];

  $("#button").click(function() {
    var ramdom = Math.floor((Math.random() * 2));
    $("#container").css(containerColors[ramdom]);
  });
});

#container {
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container-fluid">
  <div class="box">
    <button id="button">click</button>
  </div>
</div>

Answer 1

You cannot animate background-gradients.

You could use a pseudo element and play with opacity, but javaScript can only access the DOM which :pseudo element are not, only generated at screen via CSS.

You may end using an extra container dedicated to draw that second gradient your look for and play a fadding on it via opacity:

Exemple

// quick update of your script
$(document).ready(function() {
    var containerColors = [
        {"opacity" : "1"},
        {"opacity" : "0"}
    ];

    $("#button").click(function() {
        var ramdom = Math.floor((Math.random() * 2));
        $("#container .bg").css(containerColors[ramdom]);
    });
});

#container {
  position: relative;
  height: 80vh;
  background: linear-gradient(to top right, red, blue);
}

#container > .box
     /* comment:  
      or any direct child if unknown  
 #container > * 

     end comment */
{
  position: relative;
  z-index: 1;
}

#container .bg {
  background: linear-gradient(to top right, #1abc9c, #3498db);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition:0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container-fluid"><div class="bg"></div>
        <div class="box">
            <button id="button">click</button>
        </div>
    </div>

Answer 2

on your css file you can add:

#container{
    background: linear-gradient(to top right, #1abc9c, #3498db); 
    -moz-transition: background 0.3s ease-in;
    -o-transition: background 0.3s ease-in;
    -webkit-transition: background 0.3s ease-in;
  }

Whenever you change the background color of you background, the transition effect will happend.

You can also try this way:

$(document).ready(function() {
            var containerColors = [
                {"background": "linear-gradient(to top right, #1abc9c, #3498db)"},
                {"background": "linear-gradient(to top right, red, blue)"}
            ];

            $("#button").click(function() {
                var ramdom = Math.floor((Math.random() * 2));
                $("#container").hide();
                $("#container").fadeIn("slow", function(){
                    $("#container").css(containerColors[ramdom]);
                });
            });
        });

I just tested, it worked for me.

Answer 3

Animate the background using linear gradients may not be possible, instead you could do this on your javascript:

$("#button").click(function() {
    $cont = $('#container');
    $cont.fadeOut('slow', function() {
        var ramdom = Math.floor((Math.random() * 2));
        $("#container").css(containerColors[ramdom]);
        $cont.fadeIn();
    });
});