JQuery вызывать функцию анимации, когда первый заканчивается

Question

Я пытаюсь сделать пошаговую анимацию div в JQuery. Я вызываю анимацию одним щелчком, затем второй двойным щелчком, затем третий ...

Моя проблема в том, что они наложены. Если я дважды щелкаю по div, он запускает как первую, так и вторую анимацию одновременно, и это сходит с ума. Поэтому я пытаюсь разрешить ему активировать dblclick только после остановки первой функции.

Я пытался заставить его работать с если еще и .is селектором и это не работает.

$(document).ready( function (){
    $(".group").one("click", showInfo);
})

function showInfo(){

    $(this).stop().animate({height: "260px"});

    $(".group").one("dblclick", showMoreInfo);

})

function showMoreInfo(){

    $(this).stop().animate({height: "0px"});

    $(".group").one("click", showInfo);

})

Answer 1

jQuery animate имеет полный обратный вызов, вы можете использовать его для установки следующей анимации:

function showInfo(){
    $(this).stop().animate({height: "260px"}, function () { 
        $(".group").unbind("click");
        $(".group").on("dblclick", showMoreInfo);
    });
}

function showMoreInfo(){
    $(this).stop().animate({height: "20px"}, function() {
        $(".group").unbind("dblclick");
        $(".group").on("click", showInfo);
    });
}

$(document).ready( function (){
   $(".group").on("click", showInfo);
});

.group {
  height: 20px;
  width: 20px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group"></div>

И unbind предыдущего события в этих обратных вызовах.