jquery animate bind unbind
===

The problem is that the second time i click the '#mas' div at the end of the animation it automatically runs de 'arriba' function.

JS

    $(document).ready(function() {
      $('#mas').bind('click', abajo);
       function abajo(e) {
        e.preventDefault();
        $('#mas').unbind();
        $('#contenido').animate({
          top: '-=470px'
        }, 11000, function() {
    	    $('#mas').hide();
  	    $('#menos').show();
  	    $('#mas').bind('click', abajo);
        });
      }
      $('#menos').bind('click', arriba);
      function arriba(e) {
       e.preventDefault();
       $('#menos').unbind();
       $('#contenido').animate({
         top: '+=470px'
       }, 11000, function() {
    	    $('#mas').show();
            $('#menos').hide();
  	    $('#mas').bind('click', arriba);
        });
     }
  
    });

HTML  
 
    <div id="contenedor">
        <img src="asd.jpg" id="contenido"/>
        <div id="mas">mas</div>
        <div id="menos">menos</div>
    </div>

there is something wrong with my logic probably or wrong use of bind/unbind functions, i will really appreciate the help,   thanks in advance.