jquery animate bind unbind

Question

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.

Answer 1

Instead of binding and unbinding the event handlers, could you just check for animation?

$('#mas').bind('click', abajo);
   function abajo(e) {
    e.preventDefault();

    // Check if there is animation, if yes, return.
    if($('#contenido').is(":animated")) return;

    $('#contenido').animate({
      top: '-=470px'
    }, 11000, function() {
       $('#mas').hide();
       $('#menos').show();
    });
  }