title: Trouble with JQuery Animate
body: <p>I want to apologize a head of time if this post question may be too specific to help others.</p>
  
  <p>I really am struggling here with a website that I am designing.  I am using several jquery animations simultaneously and sometimes the animation works and sometimes it doesn't.  To be more specific:</p>
  
  <p>1) The animation is supposed to hide and shrink the font-size of all of the members of a single class except for the member of the class that was clicked.  The hiding function works consistently, but the font-size changing function does not occur for all the elements except for the first element in the class.</p>
  
  <p>2) When the "home" div is click (.yhs) the font is supposed to return to its original size. However, it does not change even though it is called in .animate().  </p>
  
  <p>Here is the working link to the test website:</p>
  
  <p><a href="http://mechadogs.org/yhstest" rel="nofollow">LINK TO WORKING EXAMPLE</a></p>
  
  <p>As far as source code, here is the HTML and the JS:</p>
  
  <p>I would also welcome any other additional comments that you may have and once again i am sorry for posting such a specific question,  but I would not have done so if I had not already spent several days on this problem.  Thanks.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Yonkers Historical Society&lt;/title&gt;
          &lt;script src="java-resources/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="styles/header.css"&gt;
          &lt;script src="java-resources/jquery.animate-colors-min.js"&gt;&lt;/script&gt;
          &lt;script src="java-resources/jquery.transit.min.js"&gt;&lt;/script&gt;
          &lt;script src="java-resources/typed.min.js"&gt;&lt;/script&gt;
          &lt;script src="java-resources/header-setup.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class = "main"&gt;
              &lt;div class = "title yhs one" id = "nav"&gt;&lt;/div&gt;
              &lt;div class = "title regular two" id = "nav"&gt;&lt;/div&gt;
              &lt;div class = "title regular three" id = "nav"&gt;&lt;/div&gt;
              &lt;div class = "title yhs four" id = "nav"&gt;&lt;/div&gt;
              &lt;div class = "title regular five" id = "nav"&gt;&lt;/div&gt;
              &lt;div class = "title yhs six" id = "nav"&gt;&lt;/div&gt;
              &lt;div class = "title regular seven" id = "nav"&gt;&lt;/div&gt;
              &lt;div class = "title regular eight" id = "nav"&gt;&lt;/div&gt;
              &lt;div class = "title regular grey nine" id = "nav"&gt;&lt;/div&gt;
              &lt;div class = "small ten"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "text information"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS: (I did not include typing algorithm for brevity's sake)</p>
  
  <pre><code>function hoverFunction(){
      $('.regular').hover(function(){$(this).stop(true).animate({color:'#6666FF'});},
                       function(){$(this).stop(true).animate({color:'black'});});
      $('.yhs').hover(function(){$('.yhs').stop(true).animate({color:'black'});},
                       function(){$('.yhs').stop(true).animate({color:'navy'});});
      $('.regular').click(function(){pageRedirectAnimation($('.regular').index(this));});
  
  }
  function pageRedirectAnimation(index){
      $('.title.regular').not(':eq('+index+')').css("display","none");
      $('.small').hide();
      $('.yhs').animate({fontSize:'30px'}, 100);
      $('.regular:eq('+index+')').animate({fontSize:'30px'}, 100);
      $('.main').animate({height:'10%'}, 500);
      setClickHome();
  }
  function setClickHome(){
      $('.yhs').click(function(){
          $('.yhs').animate({fontSize:'120px'});
          $('.regular').css("display", "block").animate({fontSize: '120px'}, 100);
          $('.small').show();
          $('.main').animate({height:'100%'});
      });
  }
  </code></pre>