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

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>

并取消绑定该回调中的上一个事件。