css - Changing color in Jquery -

can use css in jquery change div's color slowly? oh , 1 more thing, how can add second function <div>. here code. want change color old 1 when mouseout happens.

<script>     function myfunction() {         $(document).ready(function () {             $("#square").css({ backgroundcolor: 'blue' });          });      } </script>  <div id="square" onmouseover="return myfunction()">focus on me!</div> 

to make slow, give transition , remove document.ready calling not on load:

#square {transition: 1s linear;} 

cross browser support

-webkit-transition: 1s linear; -moz-transition: 1s linear; -o-transition: 1s linear; transition: 1s linear; 

snippet

$(document).ready(function () {    $("#square").hover(function () {      $(this).css("backgroundcolor", 'blue');    }, function () {      $(this).css("backgroundcolor", '');    });  });

#square {width: 100px; height: 100px; transition: 1s linear;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div id="square"></div>