javascript - 当其他元素消失时动画/缓和元素定位

Question

请看一下这个 fiddle :http://jsfiddle.net/dhcyA/

尝试点击一个方 block 。我想要的是，当其他元素消失时，所选 block 将动画/缓和到他的给定位置，而不是像现在这样跳跃。然后，当再次单击该框时，相同的动画会自行重复，但随后会返回原位。

也许要记住:
我使用的是响应式设计，这意味着这些 block 在缩放窗口后可以是垂直和水平的。

任何对 fiddle 的修改或建议都会很棒!

Answer 1

这是我的解决方案。

在您现有的标记上，我添加了一个包装部分来计算包装内框的位置。像这样

<div id="wrapper">
    <div class="block">
        <h2>I'm block 1</h2>
    </div>
    ....
</div>

为了保持 block 的流动性，我创建了一个函数来将 block 定位在 wrapper 上。这是 block 位置的函数:

var reposition = function() {
    wrapper = $("#wrapper");
    console.log(wrapper.innerWidth());
    pLeft = 0;
    pTop = 0;
    maxRowHeight = 0;
    $(".block").each(function(){
        if($(this).data('active')) {
            $(this).data('top', pTop);
            $(this).data('left', pLeft);
        } else {
            $(this).stop(0,0).animate({
              'top' : pTop + 'px',
              'left' : pLeft + 'px'
            });
        }
            pLeft += $(this).outerWidth() + parseInt($(this).css('marginLeft'));
            if($(this).height() > maxRowHeight) maxRowHeight = $(this).outerHeight() + parseInt($(this).css('marginTop')); //Find out the longest block on the row

            if(pLeft + $(this).next().outerWidth() + parseInt($(this).next().css('marginLeft')) >= wrapper.innerWidth()) {
               pLeft = 0;
               pTop += maxRowHeight;
               maxRowHeight = 0;
            }

    });    
};

最后，切换 block 的脚本

$(".block").click(function() {

    $(this).siblings().slideToggle('slow'); //Toggle other blocks

    if(!$(this).data('active')){ //if the block is not active
        $(this).data('left', $(this).position().left); //sets its left
        $(this).data('top', $(this).position().top);   // and top position
        $(this).animate({ //animate at the top and bottom
            top:0,
            left:0
        },'slow');

        $(this).data('active',true);

    }else{

        $(this).animate({ //animate to its last known position
            top:$(this).data('top'),
            left:$(this).data('left')
        },'slow');

        $(this).data('active',false);
    }
});

演示

• Demo [Full] (调整大小以查看保持的流动性)
• Demo [Full] (显示可变高度的版本)

这是此解决方案提供的内容:

• Remembers the last position and gradually animate to/from this position
• Block positions are calculated and animated on load and every resize
• Repositioning happens on $(window).resize() thus maintaining the fluid nature of the block, despite the use of position absolute
• Support variable heights
• Minor change on existing markup & CSS

Also fixed two issues extended by Gaby

• Accounts for each block margin independently
• Recalculates the position of the element after resize