当其他元素消失时，对元素进行动画处理/缓和定位 [英] Animate/Ease an element to position when other elements disappear

问题描述

请看一下这个小提琴: http://jsfiddle.net/dhcyA/

Please take a look at this fiddle: http://jsfiddle.net/dhcyA/

尝试单击一个块.我想要的是，当其他元素消失时，选定的块将设置动画/缓和到其给定的位置，而不是像现在这样跳动.然后，再次单击该框时，相同的动画会重复自身，然后放回原处.

Try clicking on a block. What I want is that when the other elements disapear, the selected block will animate/ease to his giving position instead of just jumping like it does now. Then the same animation repeats itself when clicking again on the box, but then back to place.

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

Maybe to keep in mind:
I'm using a reponsive design, which means those blocks can be vertical and horizontal after scaling the window.

对小提琴或建议的任何重新修订都很棒！

Any redevisions on the fiddle or suggustions would be great!

推荐答案

这是我的解决方案.

在您现有的标记上，我添加了一个包装器分区，以计算包装器在包装盒内的位置.像这样

On your existing markup, I added a wrapper division to calculate the position of boxes inside the wrapper. Like this

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

为了保持块的流畅性，我创建了一个函数来将块放置在包装纸上.这是块位置的功能:

To maintain the fluidness of the block, I created a function to position the block on the wrapper. Here is the function for position of the blocks:

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

Demos

• 演示 [Full] (调整大小以保持流畅性)
• 演示 [完整] (版本显示可变高度)

Demos

• Demo[Full] (Resize this to see the fluidness maintained)
• Demo[Full] (version showing variable heights)

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

Here is what this solutions gives:

• 记住最后一个位置并逐渐从该位置开始动画
• 计算块位置并在加载和每次调整大小时对其进行动画处理
• 重新定位发生在$(window).resize()上，因此即使使用绝对位置也可以保持块的流体性质
• 支持可变高度
• 现有标记的较小更改& CSS

• 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

还解决了盖比(Gaby)扩展的两个问题

Also fixed two issues extended by Gaby

• 每个块保证金的帐户独立
• 调整大小后重新计算元素的位置

这篇关于当其他元素消失时，对元素进行动画处理/缓和定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！