JQuery在第一次结束时调用动画函数

Question

我正在尝试在 JQuery 中制作一个 div 的逐步动画。我通过单击调用动画，然后双击调用第二个动画，然后第三个......

我的问题是它们重叠。如果我开始双击 div，它会同时启动第一个和第二个动画，它会发疯。所以我试图让它在第一个功能停止后才激活 dblclick。

我试图让它与 if else 和 .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

jQueryanimate有一个完整的回调，你可以用它来设置下一个动画：

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 回调中的前一个事件。