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

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。

因此，当您单击某个列时它会打开并再次单击它会关闭。这就是它应该如何工作的。但是，问题是如果你现在在same栏上点击again，它会立即打开和关闭，这不是我想要的效果。

我该如何解决这个问题？

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

Answer 1

了解 event delegation

简单重写您的代码就变成了

$(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);


    });

});

DEMO

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

On first click animation works good, on second it skips some steps

javascript

jquery

html

css

velocity.js