0

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

    }

});
4

2 回答 2

1

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

于 2013-05-29T21:51:16.997 回答
0

正如 Yotam 评论的那样，没有 jsFiddle 很难调试。但是让我印象深刻的事情（而且绝不是详尽无遗的，我也不是 JavaScript 专家）：

  1. 缓存你的 jQuery 对象而不是不断地重新查询 DOM (var $sticker = $('.sticker'))
  2. 将相同对象上的动画链接在一起
  3. $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;
        });
    }
});
于 2013-05-29T22:22:55.363 回答