3boxes jquery with plugin

HTML

<link rel="stylesheet" href="http://http://dev.thepixellary.es/resources/960.css">
<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js"></script>    
<div class="container_12">
        <div class="grid_12">
            <div id="central-image">
                <h1>header</h1>
            </div><!-- end logo -->
        </div>    
    </div><!-- end container_12 -->

    <div class="clear"></div>    
    <div class="container_12">
        <div class="grid_12">
            <div id="home-boxes">
                <div id="box-orange" class="box">
                    <h2>OPTION1</h2>
                    <p>Lorem ipsum</p>
                    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem </p>
                    <a href="#">Link</a>
                </div>
                <div id="box-pink" class="box">
                    <h2>OPTION1</h2>
                    <p>Lorem ipsum</p>
                    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem </p>
                    <a href="#">Link</a>
                </div>
                <div id="box-blue" class="box">
                    <h2>OPTION1</h2>
                    <p>Lorem ipsum</p>
                    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem </p>
                    <a href="#">Link</a>
                </div>
            </div>
        </div>
    </div><!-- end container_12 -->
    
    <div class="clear"></div>    
    <div id="calloutwrapper">
        <div class="container_12">
        <div id="callout">
        </div>
        </div><!-- end container_12 -->
    </div><!-- end calloutwrapper -->

CSS

.clear { clear: both; }
body { font-family: Times New Roman, Arial, Tahoma, Helvetica, Verdana; font-size: 18px; color: #181416; font-weight: normal; background: #F6F5F2; }
a, a:visited { color: #75A527; text-decoration: none; }
a:hover { color: #75A527; text-decoration: underline; }

#central-image { height: 200px; background: #000000; color: #FFFFFF; }
#home-boxes {  margin: -30px auto 0; height: 470px; background: url('http://dev.thepixellary.es/resources/main_boxes_home.png') 5px center no-repeat; padding-left: 22px; }
.box { float: left; margin-top: 15px; }
.box h2 { font-family: 'LeagueGothicRegular'; font-size: 48px; color: #EBE9E3; }
#box-orange , #box-pink, #box-blue { width: 245px; padding:10px 25px 0; cursor: pointer; margin-top: 2px; }
#box-orange > p:first-of-type, #box-pink > p:first-of-type, #box-blue > p:first-of-type  { margin-top: 48px; font-size: 17px; font-family: 'ColaborateMediumRegular'; color: #4F454A; text-transform: uppercase; margin-bottom: 15px; } 
#box-orange > p:nth-child(3), #box-pink > p:nth-child(3), #box-blue > p:nth-child(3)  { font-size: 17px; line-height: 24px;   } 

#box-orange{ margin-left: 5px; margin-right: 2px; }
#box-orange:hover {  }
#box-orange:hover > p:first-of-type { color:#EBE9E3; }
#box-orange:hover > p:nth-child(3) { color: #FFFFFF; }
#box-orange:hover a { background: url('http://dev.thepixellary.es/resources/link_circle_white_orange.png') center no-repeat; color: #000000; }

#box-pink { margin-right: 3px; }
#box-pink:hover { }
#box-pink:hover > p:first-of-type { color:#EBE9E3; }
#box-pink:hover > p:nth-child(3) { color: #FFFFFF; }
#box-pink:hover a { background: url('http://dev.thepixellary.es/resources/link_circle_white_pink.png') center no-repeat; color: #000000; }

#box-blue { margin-right: 2px;  }
#box-blue:hover {  }
#box-blue:hover > p:first-of-type { color:#EBE9E3; }
#box-blue:hover > p:nth-child(3) { color: #FFFFFF; }
#box-blue:hover a { background:...

JavaScript

$(function() {
               $('#box-orange').hover( function(){          
                  $(this).animate({ backgroundColor: "#E9902C" }, "slow");
               },
               function(){    
                  $(this).stop().css('background-color', 'transparent');
               });
               
               $('#box-pink').hover( function(){          
                  $(this).animate({ backgroundColor: "#DD2D77" }, "slow");
               },
               function(){             
                  $(this).stop().css('background-color', 'transparent');
               });
               
               $('#box-blue').hover( function(){          
                  $(this).animate({ backgroundColor: "#29A8DC" }, "slow");
               },
               function(){             
                  $(this).stop().css('background-color', 'transparent');
               });
            });