javascript - jquery 动画绑定解除绑定

Question

问题是我第二次单击动画末尾的“#mas”div 时，它会自动运行 de 'arriba' 功能。

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>

我的逻辑可能有问题或绑定/取消绑定功能的使用错误，我将非常感谢您的帮助，在此先感谢。

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