Animate Button Colour, icon and Text using JQuery

Uses the JQuery Color plugin to animate a button on click.

HTML

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.0.min.js"></script>

  <div id="block" class="button button--quinary">
    <div class="icon">
    </div>
    <div id="text">
      Choose
    </div>
  </div>

CSS

.icon {
  position: absolute;
  top: 13px;
  left: 25px;
  height: 25px;
  width: 25px;
  background: red;
  display: none;
}

.box--light-grey {
	background-color: #F5F5F5;
}

.button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid transparent;
    color: #FFF;
    display: inline-block;
    padding: 11px 60px;
}

.button--quinary {
	background-color: #F5F5F5;
	border-color: #666666;
	color: #666666;
}

.button--quinary:hover {
	background-color: #EBEBEB;
	border-color: #333333;
	color: #333333;
}

.bundle__inclusion--no-bullet, .button, .button--full-width, .carousel__control, .cascade__colors, .cascade__header, .cascade__icon, .cascade__spring, .cascade__table-data--center, .cascade__table-heading--center {
    text-align: center;
}
.button, .cards__impact {
    font-size: 20px;
}
.accordion__heading:hover, .breadcrumbs__checkbox, .breadcrumbs__checkbox-label, .button, .button:hover {
    cursor: pointer;
}
body {
    color: #333;
    font-size: 18px;
    line-height: 1.333;
    font-family: arial;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

JavaScript

jQuery("#block").click(function(){
  jQuery("#block").animate({
        backgroundColor: '#489506',
        color: '#FFF'
      }, 1000, 
      function(){$('.icon').animate({width: 'toggle'});
   } );
   $('#text').fadeOut(500, function() {
        $(this).text('Selected').fadeIn(500);
    });
});