jquery animate bind unbind

Question

问题是我第二次点击动画结尾处的'#mas'div会自动运行de'riveba'功能。

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>

我的逻辑错误或错误地使用了bind / unbind函数，我会非常感谢你的帮助，提前谢谢。

Answer 1

您可以只检查动画吗？

而不是绑定和解除对事件处理程序的绑定

$('#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();
    });
  }