Question

我正在尝试点击链接执行简单的动画。我希望第一次点击后链接应该被禁用，只有在第一次调用后开始的动画完成后才能重新启用。

HTML：

<a id="link" href="#">Click</a>    
<div id="test" style="float:left;border:1px solid #000;width:100px;height:100px;">Test</div>
<div id="test2"></div>

jQuery的：

$('#link').click(function(e){
  $('#link').bind('click', disableLink);
  ht = $('#test').height();
  $('#test').animate({height:'+=50'},5000,function(){$('#link').unbind('click', disableLink);});
  $('#test2').html(ht);
});

function disableLink(e) {
    e.preventDefault();
    return false;
}

小提琴：http://jsfiddle.net/uHR7a/2/

Answer 1

在jquery中使用此代码：

   $('#link').click(function(e){
      $('#link').removeAttr('href');
      ht = $('#test').height();
      $('#test').animate({height:'+=50'},5000,function(){$('#link').attr('href', '#')});
      $('#test2').html(ht);
    });

    function disableLink(e) {
        e.preventDefault();
        return false;
    }

Answer 2

您可以使用匿名函数声明变量in_process，并依赖它来启动新动画。

演示：http://jsfiddle.net/dUarG/1/

(function () {
    var in_process = false;

    $('#link').click(function (e) {
        e.preventDefault();

        if (!in_process) {
            in_process = true;

            $('#test').animate({height: '+=50'}, 2000, function () {
                in_process = false;
            });
        }  
    });
})();

Answer 3

您可以使用on()和off()：

$('#link').on('click', anim); //bind click

function anim(e) {
    $(e.target).off('click'); //unbind click when animating
    ht = $('#test').height();
    $('#test').animate({
        height: '+=50'
    }, 5000, function() {
        $(e.target).on('click', anim); //rebind when done
    });
    $('#test2').html(ht);
}

FIDDLE

无法在第一次单击时禁用链接，并在动画完成时重新启用

3 个答案: