我想防止触发第二次点击，直到使用绑定和取消绑定完成动画但无法正常工作为止

Question

I want to prevent a second click from firing until an animation is complete.

$('#moveDown').click(function(){
  var currentPos = parseInt($('#blog-slider').css('top'));
  if (currentPos < 0) {
    $('#moveDown').unbind('click');
    $('#blog-slider').animate({'top': currentPos + 140},500, function() {
      $('#moveDown').bind('click');
    });
  }
});

Unbind is working fine, but it is not rebinding when the animation is complete, so the animation will only run once.

I did look here but this only confirms that "bind" and "unbind" is the way to get the functionality I need and I still don't understand why it isn't working.

Answer 1

$('#moveDown').bind('click') just triggers a click, unless you bind a function that does something.

One technique is to set and unset a .data variable on the element, and check if it's set or not:

$('#moveDown').click(function(){
    if (!$('#moveDown').data('clicked')) {
        $('#moveDown').data('clicked',true);
        var currentPos = parseInt($('#blog-slider').css('top'),10); // always use a radix
        if (currentPos < 0) {
            $('#blog-slider').animate({'top': currentPos + 140},500, function() {
                $('#moveDown').data('clicked',false);
            });
        }
    }
});