JQuery animate callback not working

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div id="right-container" class="container-right">
    <a onclick="switchPage(this)">click me</a>
    </div>
</body>

</html>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.container-right {
  background: red;
  width: 65%;
  height: 100%;
  min-height: 500px;
  float: left;
}

JavaScript

function switchPage(e) {
    var right = document.getElementById("right-container");
    right.animate({
        backgroundColor: '#fff'
    }, {
        duration: 550,
        complete: function () {
            alert('hello')
        }
    });



};