No se puede deshabilitar el enlace en el primer clic y volver a habilitarlo cuando se completa la animación

I am trying to perform a simple animation on click of a link. I want that the link should get disabled after the 1st click and should be re-enabled only after the animation, that started as a result of the first call, completes.

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

Violín: http://jsfiddle.net/uHR7a/2/

preguntado el 28 de agosto de 12 a las 09:08

Just for information to you: The html source at your jsfiddle is not the same as you posted here. -

3 Respuestas

You can use anonymous function where you declare a variable in_process and depends on it start new animation or not.

Demostración: 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;
            });
        }  
    });
})();
​

Respondido 28 ago 12, 09:08

use this code as you 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;
    }

Respondido 28 ago 12, 09:08

Puedes usar on() y off() para esto:

$('#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);
}​

VIOLÍN

Respondido 28 ago 12, 09:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.