错误的 JQuery .animation()

Posted 2023-05-08

【中文标题】错误的 JQuery .animation()

【英文标题】：buggy JQuery .animation()

【发布时间】：2013-05-25 08:04:48

【问题描述】：

这里我在一个 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;
        );

    

);

【问题讨论】：

你能附上一个 jsFiddle 或类似的东西吗？

【参考方案1】：

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

【参考方案2】：

正如 Yotam 所说，没有 jsFiddle 很难调试。但是让我印象深刻的事情（而且绝不是详尽无遗的，而且我不是 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;
        );
    
);