In jquery how do we animate the element and background ?

This code is used for showing that animation effects in background and element

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>


     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

    <style> 
             #elem {
                 color: white;
                 background-color: red;
                 font-size: 25px;
                 padding: 1em;
                 text-align: center;
             }
         </style>

         <div id="elem">color animations</div>
         <button id="toggle2">Change colors</button>

         <script>
             $("#toggle2").click(function () {
                 $("#elem").animate({
                     color: "green",
                     backgroundColor: "rgb( 130, 140, 200 )"
                 });
             });
         </script>