title: How to reverse a jQuery animation back to original CSS properties
body: <p>There are a lot of very similar questions on here but I cannot find an exact answer to my question. </p>
  
  <p>I am new to using the jQuery <code>.animate()</code> method and I want to know if there's a common or best method of reversing the animation?</p>
  
  <p>Here is a fiddle for an example of what I've come up with:
  <a href="http://jsfiddle.net/kingcharles/0o1m8bax/" rel="nofollow" title="Fiddle">Fiddle</a></p>
  
  <p>Essentially all it does is use an if statement to check one CSS property and then animate it to one state or back to the other state.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $("[name=toggle]").on("click", function () {
          if ($('.box').width() &lt; 125) {
              $(".box").animate({
                  opacity: .3,
                  width: "125px",
                  height: "125px"
              }, 250);
          } else {
              $(".box").animate({
                  opacity: 1,
                  width: "100px",
                  height: "100px"
              }, 250)
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
      background-color: lightblue;
      box-shadow: 5px 5px 10px #000000;
      width: 100px;
      height: 100px;
      display: block;
      margin: 20px auto 0 auto;
      border-radius: 25px;
  }
  [name="toggle"] {
      display: block;
      margin: 0 auto;
      margin-top: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button name="toggle"&gt;Animate&lt;/button&gt;
  &lt;div class="box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what I was able to come up with with my first exposure to .animate(), but I think there may be a better way. 
  Say you want to have an animation on hover, and reverse the animation when the mouse is moved off the element. Is there a way to easily reverse the jQuery animation easily? I am away I could use a :hover state with CSS, but this is a hypothetical question regarding jQuery .animate(). </p>