title: Multiple hover instances jQuery
body: <p>I have a div to animate from the top to the bottom of another div. I'm currently playing w/ mouseenter/leave and JS animations w/ easing where its original state is up/top. I want to hover/mouseenter and have it move down and stay down if I mouseleave/hover off. When I hover again it will animate back to the top/start. </p>
  
  <p>I initially used mouseenter/leave which obviously doesn't do what I need as I would like the state to remain the same upon mouseleave. So what function would be best for this need? I'm still learning the terminology and am stumbling over how to better phrase the question.</p>
  
  <p>Code:</p>
  
  <pre><code>    function init() { 
          mouseenter: function(){
              $(".ltrP").stop(true, true).animate({
                  marginTop:"170px"
              }, 
              {
                  duration: 1000,
                  easing: "easeOutBounce"
              });
          },
          mouseleave: function(){
              $(".ltrP").stop(true, true).animate({
                  marginTop: "0px"
              },
              {
                  duration: 1000,
                  easing: "easeInBounce"
              });   
          }
      });
  }
  window.onload = init;
  </code></pre>