animate对颜色设置不起作用

今天了解了一下stop的使用方法，但是实例中加入color:red的时候，动画效果没有实现，具体实例如下：

http://jsbin.com/fezaroyene/edit?html,js,output

查看animate的使用方法，发现只能使用数字值

若想实现颜色变化的话，需要加入插件：

https://github.com/jquery/jquery-color

       <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="jquery-color/jquery.color.js"></script><!--引入jquery.color.js插件-->
        <div id="animater">
            stop()方法测试
        </div>
        <div id="button">
            <input type="button" id="button1" value="stop()"/>
            <input type="button" id="button2" value="stop(true)"/>
            <input type="button" id="button3" value="stop(false,true)"/>
            <input type="button" id="button4" value="stop(true,true)"/>
            
        </div>

               //为了看效果，随意写的动画
                $('#animater').animate({
                    'right':-400
                }, 3000)
                  .animate({'font-size':'16px'},'normal')
                  .animate({'font-size':'26px'},'normal')
                  .animate({'font-size':'36px'},'normal')
                  .animate({'opacity':0},'normal')
                  .animate({'opacity':1},'normal')
                  .animate({'left':'200px','font-size':'16px','color':'red'},'normal');
                // 点击不同的button执行不同的操作
        
                $('#button1').click(function(){
                    //默认参数是false，不管写一个false还是两个false还是没写false效果一样
                    $('#animater').stop();
                });
                $('#button2').click(function(){
                    //第二个参数默认false
                    $('#animater').stop(true);
                });
                $('#button3').click(function(){
                    $('#animater').stop(false,true);
                });
                $('#button4').click(function(){
                    $('#animater').stop(true,true);
                });