2

リンクをクリックするだけで簡単なアニメーションを実行しようとしています。最初のクリック後にリンクを無効にし、最初の呼び出しの結果として開始されたアニメーションが完了した後にのみ再度有効にする必要があります。

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/

</ p>

4

3 に答える 3

2

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;
    }
于 2012-08-28T08:05:10.497 に答える
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;
            });
        }  
    });
})();
​
于 2012-08-28T08:13:58.823 に答える
0

あなたはこれのため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);
}​

フィドル

于 2012-08-28T08:12:39.637 に答える