Javascript 用Jquery.css（）使它看起来像动画？

我不能使用jQuery UI或任何插件。我有一个父div，它包含不能被它影响的元素。所以我不能做一个简单的不透明度开关

    <img class="badge_ico" rel="28" src="" />
    <div>I <3 Ford</div>
</div>  

I您可以设置颜色数组，并使用
setInterval（）
更改间隔上的颜色：

var target_el = $('#target_element'),
    colors    = ['#999', '#666', '#333', '#ccc'],
    index     = 0,
    timer;

target_element.on('mouseenter', function () {
    timer = setInterval(function () {
        if (index in colors) {
            target_el.css({
                'background-color' : colors[index]
            });
            index++;
        } else {
            index = 0;
            clearInterval(timer);
        }
    }, 100);
});

这里有一个jsfiddle来展示工作中的解决方案：
这是我对它作为一种自动化方法的看法。但可以更好地优化：事先警告一下，这是一个有点垃圾的代码（我现在有一篇社会研究论文要写：P）

HTML
javascript
因此，如果我在这里编写代码来设置颜色动画（10行），这算是一个插件吗？我随机地在数组中加入一些灰色，我记不清哪种十六进制代码是哪种颜色。
<div id="box">This is a test</div>

#box
{
    color:white;
    background:#333;
    padding:20px;
    margin:20px;
    float:left;
    cursor:pointer;
}

var box = document.getElementById("box");

box.onclick = function(){
    box.style.background = "#333";
    var current = Math.round(0.2 * 256);
    var step = 1;
    var ms = 10;
    var animation = setInterval(function(){
        current += step;
        var shade = (current).toString(16);
        box.style.backgroundColor = "#" + shade + shade + shade;
        if(parseInt(shade,16) > 0.7 * 256)
            clearInterval(animation);
    },ms);
}