title: How to bind mouseover event after unbinding it?
body: <p>I'm trying to get a nice animation with jQuery. I came up with that code:</p>
  
  <pre><code>$(document).ready(function () {
  
      $('#arrow_up').hide();
  
      $('#arrow_down').bind({
          mouseenter: function() {
              $('#content')
                  .animate({
                      height: '110px'},
                      300);
                  },
          mouseleave: function() {
              $('#content')
                  .animate({
                      height: '100px'},
                      300);
                  }})
          .click(function() {
              $(this)
                  .fadeOut( 1000 )
                  .unbind('mouseenter')
                  .unbind('mouseleave');
              $('#content')
                  .animate({
                      height: '300px'},
                      500);
              $('#arrow_up')
                  .delay(1000)
                  .fadeIn( 2000 );
          });
  
      $('#arrow_up').bind({
          mouseenter: function() {
              $('#content')
                  .animate({
                      height: '290px'},
                      300);
                  },
          mouseleave: function() {
              $('#content')
                  .animate({
                      height: '300px'},
                      300);
                  }})
          .click(function() {
              $(this)
                  .fadeOut( 1000 )
                  .unbind('mouseenter')
                  .unbind('mouseleave');
              $('#content')
                  .animate({
                      height: '100px'},
                      500);
              $('#arrow_down')
                  .delay(1000)
                  .fadeIn( 2000 );
          });
  
      });
  </code></pre>
  
  <p>It is working nicely, but only the first time. You can check it here: <a href="http://www.cow-art.eu/test/index.html" rel="nofollow">http://www.cow-art.eu/test/index.html</a></p>
  
  <p>I want to animate the content div on hovering an arrow below. After clicking it I want to slide it down to full size and after the next click - to hide it partially. You can check it on the link provided above. It's working fine, but the arrow hovering animation is working unless I show and hide the content. The second approach is not animating it as the first.</p>
  
  <p>I assume it's because the clicking event is unbinding the mouseenter and mouseleave, and there is no other event what can bind it again.</p>
  
  <p>I ran out of ideas how to fix it. Can you please help me with that one?</p>