jquery - 有问题的 JQuery .animation()

Question

这里我在一个 div 中有 6 个 div (.sticker)，onClicking 其中一个我想 fadeOut 其他的保持点击的位置(这就是我执行 postop/posleft 操作的原因)然后我想将它移动到较大的 div 的中间，同时它按高度和宽度增长，显示隐藏的 div (.info)。关闭也一样!所以，这段代码可以正常工作，但它真的很慢，它不像 jQuery 应该的那样流畅，我做错了什么吗？

感谢所有社区!

$("body").on('click', '.sticker', function () {

    if (!is_open) {
        postop = $(this).position().top;
        posleft = $(this).position().left;
        $('.sticker').not(this).fadeOut(350, function () {
            $(".sticker").css("position", "absolute").css("left", posleft + "px").css("top", postop + "px");
            $(".sticker").animate({
                'top': '0px',
                'left': '300px',
                'height': '480px',
                'width': '750px',
                'left': '90px'
            }, 350);
            $(".sticker").children(".wrap").animate({
                'height': '343px',
                'width': '750px'
            }, 350);
            $(".sticker").find(".imgspace").animate({
                'height': '343px',
                'width': '750px'
            }, 350);
            $(".sticker").find(".info").animate({
                'height': '100px'
            }, 350);
            $('.arrow-left').animate({
                'left': '-20px'
            }, 450);
            $('.arrow-right').animate({
                'left': '880px'
            }, 450);
            is_open = true;

        });
    }
    if (is_open) {
        $(".sticker").children(".wrap").animate({
            'height': '193px',
            'width': '300px'
        }, 350);
        $(".sticker").find(".imgspace").animate({
            'height': '193px',
            'width': '300px'
        }, 350);
        $(".sticker").find(".info").animate({
            'height': '0px'
        }, 350);
        $(".sticker").animate({
            'height': '230px',
            'width': '300px',
            'top': postop,
            'left': posleft
        }, 350, function () {
            $(".sticker").css("position", "static");
            $(".sticker").not(this).fadeIn(300);
            is_open = false;
        });

    }

});

Answer 1

您将要使用 .siblings当你点击一个时隐藏所有其他人。我会对 jQuery API 文档做一些研究。这就是我要开始的地方。