title: Why is jquery animating my div size but failing to animate my text color?
body: <p>My jQuery script is working to animate height and width of divs, but it is not animating the color of the text within those divs. Does anyone know why that is? I must be missing something really simple. I pasted the full code below, if that helps identify the problem. Line 9 and 12 are the ones that don't seem to be working.</p>
  
  <p><strong>Snippet:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".postit_family").hover(function() {
      $(this).animate({
        height: "138",
        width: "150",
        left: "-=10",
        top: "-=9",
        'line-height': "132px"
      }, "fast");
      $("span").animate({
        color: "red"
      }, "fast");
    }, function() {
      $(this).animate({
        height: "120",
        width: "130",
        left: "+=10",
        top: "+=9",
        'line-height': "118px"
      }, "fast");
      $("span").animate({
        color: "black"
      }, "fast");
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a:hover {
    text-decoration: none !important;
  }
  
  #container {
    width: 780px;
    height: 673px;
    background-image: url("https://epwork.ep.corp/wg/Residuals/Images1/iMac.jpg");
    position: relative;
  }
  
  .postit_family {
    width: 130px;
    height: 120px;
    text-align: center;
    line-height: 118px;
    position: absolute;
  }
  
  .postit_family span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-family: Raleway;
    text-align: center;
    color: #67768A;
    width: 90px;
    font-size: 18px;
  }
  
  #postit_1 {
    left: 78px;
    top: 85px;
    background: linear-gradient(#9DA0E0, #C9CAF2, #D5D6F5) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996);
    /* For IE 11*/
  }
  
  #postit_2 {
    left: 242px;
    top: 85px;
    background: linear-gradient(#A8A8A8, #E3E3E3, #FAFAFA) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996);
    /* For IE 11*/
  }
  
  #postit_3 {
    left: 410px;
    top: 85px;
    background: linear-gradient(#88DBBD, #CCEDE1, #DCF7ED) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996);
    /* For IE 11*/
  }
  
  #postit_4 {
    left: 575px;
    top: 85px;
    background: linear-gradient(#D1BF8C, #F5E2CE, #FAEFE3) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996);
    /* For IE 11*/
  }
  
  #postit_5 {
    left: 78px;
    top: 255px;
    background: linear-gradient(#EBBEBE, #F7D7E1, #FAE3EA) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996);
    /* For IE 11*/
  }
  
  #postit_6 {
    left: 242px;
    top: 255px;
    background: linear-gradient(#DAE3AA, #FAFCEB) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996);
    /* For IE 11*/
  }
  
  #postit_7 {
    left: 410px;
    top: 255px;
    background: linear-gradient(#5493D6, #7ECDE0, #B7E3ED) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996);
    /* For IE 11*/
  }
  
  #postit_8 {
    left: 575px;
    top: 255px;
    background: linear-gradient(#87CDD6, #E3F9FC) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996);
    /* For IE 11*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'&gt;
  &lt;script src="https://code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;
  &lt;/script&gt;
  
  
  
  &lt;div id="container"&gt;
    &lt;a href="#"&gt;
      &lt;div id="postit_1" class="postit_family"&gt;&lt;span&gt;Start Card&lt;/span&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a href="#"&gt;
      &lt;div id="postit_2" class="postit_family"&gt;&lt;span&gt;Invoice &amp; Time Card Entry&lt;/span&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a href="#"&gt;
      &lt;div id="postit_3" class="postit_family"&gt;&lt;span&gt;Smart Products&lt;/span&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a href="#"&gt;
      &lt;div id="postit_4" class="postit_family"&gt;&lt;span&gt;Reports&lt;/span&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a href="#"&gt;
      &lt;div id="postit_5" class="postit_family"&gt;&lt;span&gt;Paycodes&lt;/span&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a href="#"&gt;
      &lt;div id="postit_6" class="postit_family"&gt;&lt;span&gt;System Guides&lt;/span&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a href="#"&gt;
      &lt;div id="postit_7" class="postit_family"&gt;&lt;span&gt;Occ Codes&lt;/span&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;a href="#"&gt;
      &lt;div id="postit_8" class="postit_family"&gt;&lt;span&gt;Marcs&lt;/span&gt;&lt;/div&gt;
    &lt;/a&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>