buggy JQuery.animation（）

在这里，我在一个div中有6个div（.sticker），单击其中一个，我想将其淡出（fadout）其他部分将单击的一个保持在它的位置（这就是为什么我要做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;
        });

    }

});

---

当您单击一个按钮时，您将希望使用隐藏所有其他按钮。我将对jQueryAPI文档进行一些研究。这就是我要开始的地方。

正如Yotam所评论的，没有JSFIDLE很难调试。但对我来说最突出的是（这绝非详尽无遗，我也不是JavaScript专家）：

缓存jQuery对象，而不是继续重新查询DOM（var$sticker=$（'.sticker'））

将相同对象上的动画链接在一起

$sticker.children（“.wrap”）和$sticker.find（“.imgspace”）之间有什么区别？您不能使用$sticker.find（“.wrap.imgspace”）

您可以通过将值设置为变量对象来进一步简化代码，而不是使用不同的值调用两次硬编码的相同方法

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

    if (!is_open) {
        var $position = $(this).position(),
            $sticker = $('.sticker');

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

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

---

您可以附加一个jsFiddle或类似的东西吗？