jquery animate绑定解除绑定

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