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