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文档做一些研究。这是我要开始的地方。

Answer 2

正如Yotam评论的那样，没有jsFiddle就很难调试。但事情对我来说很突出（绝不是这种详尽无遗而且我不是JavaScript专家）：

缓存你的jQuery对象，而不是继续重新查询DOM（var $ sticker = $（＆＃39; .sticker＆＃39;））
将您的动画链接在同一个对象上
$ sticker.children（＆＃34; .wrap＆＃34;）和$ sticker.find（＆＃34; .imgspace＆＃34;）有什么区别？你能不能使用$ sticker.find（＆＃34; .wrap，.imgspace＆＃34;）？

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

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

buggy JQuery .animation（）

2 个答案: