JQuery Color: Do Color Animations with jQuery

<style>
    div {
        position: absolute;
        background-color: #fff;
        width: 90px;
        height: 90px;
        border: solid 1px #000;
    }

    #testElement1 {
        left: 50px;
    }

    #testElement2 {
        left: 200px;
    }
</style>

<div id="testElement1">
</div>

<div id="testElement2">
</div>

<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.color-2.1.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#testElement1").animate({ backgroundColor: "#abcdef" }, 800)
                .animate({ backgroundColor: "#fff" }, 800)
                .animate({ backgroundColor: "#abcdef" }, 800)
                .animate({ backgroundColor: "#fff" }, 800);

            $("#testElement2").animate({ backgroundColor: "#969696" }, 800)
                .animate({ backgroundColor: "#fff" }, 800)
                .animate({ backgroundColor: "#969696" }, 800)
                .animate({ backgroundColor: "#fff" }, 800);
        });
    </script>