animate backgroundColor and color of element

by ostapische

HTML

<script src="https://rawgithub.com/jquery/jquery-color/master/jquery.color.js"></script>
<div id="testDiv">Йа кнопко_О</div>

CSS

div {
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    left: 50px;
    top: 50px;
}

JavaScript

var movingVector = 10;// 1
var rotationAngle = 360;// 360
var bgColorFrom = "#ff0000";
var bgColorTo = "#00ff00";
var textColorFrom = "#000000";
var textColorTo = "#ffffff";
$(document).ready(function() {
    $("div#testDiv").css("background-color", bgColorFrom);
    $("div#testDiv").css("color", textColorFrom);
    $("div#testDiv").mouseover(function() {
        $(this).stop();
        var oLeft = parseInt($(this).css("left"));
        var oTop = parseInt($(this).css("top"));
        $(this).animate({
            backgroundColor: bgColorTo,
            color: textColorTo,
            rotation: rotationAngle
        }, {
            progress: function(anim, ps, rMs) {
                var dLeft = Math.random() * (movingVector - (-movingVector)) + (-movingVector);
                var dTop = Math.random() * (movingVector - (-movingVector)) + (-movingVector);
                $(this).css("left", (oLeft + dLeft) + "px");
                $(this).css("top", (oTop + dTop) + "px");
            },
            duration: 500,
            complete: function() {
                $(this).css("left", oLeft + "px");
                $(this).css("top", oTop + "px");
            },
            step: function(now, tween) {
                $(this).css({"transform": "rotate(" + now + "deg)"});
            }
        });
    });
    $("div#testDiv").mouseout(function() {
        $(this).stop();
        var oLeft = parseInt($(this).css("left"));
        var oTop = parseInt($(this).css("top"));
        $(this).animate({
            backgroundColor: bgColorFrom,
            color: textColorFrom,
            rotation: 0//-rotationAngle
        }, {
            progress: function(anim, ps, rMs) {
                var dLeft = Math.random() * (movingVector - (-movingVector)) + (-movingVector);
                var dTop = Math.random() * (movingVector - (-movingVector)) + (-movingVector);
                $(this).css("left", (oLeft + dLeft) + "px");
                $(this).css("top", (oTop + dTop) +...