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

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

JQuery call an animation function when first ends

javascript

jquery

animation

styles