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

了解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

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

1 个答案: