title: Why is my div not returning to normal when my mouse leaves the area?
body: <p>I'm using some javascript to increase the size of a div when a mouse enters the target area, but then I want it to return to normal size when the mouse leaves the targeted area.</p>
  
  <p>Not sure what is wrong with my code.</p>
  
  <pre><code>$(document).ready(function() {
  $(".someContent").on("mouseenter", function() {
      $(this).toggleClass("highLight");
      if ($(this).hasClass('highLight')) {
      $(this).animate({"width": "80%", "height": "200px", "opacity": "1"}, "fast");
  } else {
      $(this).animate({"width": "30%", "height": "60px", "opacity": "1"}, "fast");
  }
  $(".someContent").on("mouseleave", function() {
      $(this).toggleClass("highLight");
  });
  });
  })
  </code></pre>
  
  <p>I have it working now with </p>
  
  <pre><code>$(document).ready(function() {
  $(".someContent").on("mouseenter", function() {
      $(this).toggleClass("highLight");
      if ($(this).hasClass('highLight')) {
          $(this).animate({"width": "80%", "height": "200px", "opacity": "1"}, "fast");
      } else {
          $(this).animate({"width": "30%", "height": "60px", "opacity": "1"}, "fast");
      }
  }).on("mouseleave", function() {
      $(this).toggleClass("highLight");
  });
  })
  </code></pre>
  
  <p>I feel like there is a better way.  I'm trying to use javascript over css to learn javascript.</p>