第一次点击动画效果很好，第二次跳过一些步骤

Question

对于此动画，我使用Velocity.js ，这是代码

$(document).ready(function() {
    $('.shrink').on('click', function() {
        $(".spread").removeClass("spread").addClass("shrink");
        $(this).removeClass("shrink").addClass("spread");
        $(".spread").velocity({
            width: "80%"
        }, 300);
        $(".shrink").velocity({
            width: "5%"
        }, 300);
        $('.spread').on('click', function() {
            $(this).removeClass("spread").addClass("shrink");
            $(".shrink").velocity({
                width: "20%"
            }, 300);
        });
    });
});

以及具有完整动画预览的jsfiddle 。

因此，当您单击某个列时，它将打开，然后再次单击，它将关闭。 那应该是这样工作的。 但是，问题是，如果您现在再次单击同一列，它将立即打开和关闭，这不是我想要的效果。

我怎样才能解决这个问题？

顺便说一句，不知道为什么，但是目前在chrome中不起作用，但是在ff中起作用。

Answer 1

了解事件委托

简单的代码重写就变成了

$(document).ready(function () {

    $('body').on('click', '.spread', function () {
        $(this).removeClass("spread").addClass("shrink");
        $(".shrink").velocity({
            width: "20%"
        }, 300);
    });
    $('body').on('click', '.shrink', function () {

        $(".spread").removeClass("spread").addClass("shrink");

        $(this).removeClass("shrink").addClass("spread");

        $(".spread").velocity({
            width: "80%"
        }, 300);

        $(".shrink").velocity({
            width: "5%"
        }, 300);


    });

});

演示