当其他元素消失时,动画/使元素更容易定位

Question

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

尝试点击一个块.我想要的是,当其他元素消失时,所选择的块将动画/轻松到他的给定位置,而不是像现在一样跳跃.然后,当再次单击该框时,相同的动画会重复,然后再返回到位置.

也许要记住:
我正在使用一个reponsive设计,这意味着在缩放窗口后这些块可以是垂直和水平的.

任何关于小提琴或建议的修改都会很棒!

Answer 1

这是我的解决方案.

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

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

为了保持块的流畅性,我创建了一个函数来将块定位在包装器上.这是块的位置函数:

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

演示

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

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

• 记住最后一个位置并逐渐动画到此位置
• 在加载和每次调整大小时计算块动画位置并设置动画
• 尽管使用绝对位置,但重新定位发生在$(window).resize()因此保持块的流体性质
• 支持变量高度
• 对现有标记和CSS进行微小更改

还解决了Gaby扩展的两个问题

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

Answer 2

最后更新

这是一个完整的工作解决方案(在我看来相当简单),JS用于设置定位(一个简单的计算)和其余的CSS转换.

演示 http://jsfiddle.net/gaby/pYdKB/3/

它保持了float:left任何数量的元素的流动性和可用性,你可以保留:nth-child样式,如果你想留下多个元素可见,它也会起作用.

JavaScript的

var wrapper = $('.wrapper'),
    boxes = wrapper.children(),
    boxWidth = boxes.first().outerWidth(true),
    boxHeight = boxes.first().outerHeight(true); 

function rePosition(){
    var w = wrapper.width(),
        breakat = Math.floor( w / boxWidth ); // calculate fluid layout, just like float:left

    boxes
        .filter(':not(.go)')
        .each(function(i){
            var matrixX = ((i)%breakat)+1,
                matrixY = Math.ceil((i+1)/breakat);

            $(this).css({
                left:(matrixX-1) * boxWidth ,
                top: (matrixY-1) * boxHeight
            });
        });
}

$('.box').click(function(){
    $(this)
        .siblings()
        .toggleClass('go');// just add the go class, and let CSS handle the rest

    rePosition(); // recalculate final positions and let CSS animate the boxes
});

$(window).resize(rePosition);
$(window).trigger('resize');

CSS

.wrapper{
    position:relative;
}

.box{
    width:200px;
    height:100px;
    position:absolute;
    margin:5px;
    cursor:pointer;
    overflow:hidden;
    text-align: center;
    line-height: 100px;

        -moz-transition-property: top,left,width,height;
     -webkit-transition-property: top,left,width,height;
         -ms-transition-property: top,left,width,height;
          -o-transition-property: top,left,width,height;
             transition-property: top,left,width,height;

        -moz-transition-duration: 1s;
     -webkit-transition-duration: 1s;
         -ms-transition-duration: 1s;
          -o-transition-duration: 1s;
             transition-duration: 1s;
}

.go{
    height:0;
    width:0;
}

注意:正如@Athari在评论中正确提到的那样,您应该包含所有浏览器前缀以获得最广泛的支持.(我最初的答案只包括moz/webkit和标准)

原始答案

您无法直接使用当前的HTML结构.浮动的概念不支持它.

但如果你能买得起一个额外的包装,那就没问题了..

只需滑动额外包装元素的内容即可.

将float代码放在包装器元素上并使用

$(document).ready(function() {

    $(".block-wrapper").click(function() {
        $(this).siblings().find('.block').slideToggle("slow");
    });

});

演示 http://jsfiddle.net/gaby/t8GNP/

更新#1

如果您需要将单击的元素移动到左上角和后面,那么您无法使用CSS执行此操作.

您需要手动定位它们(通过JS),设置CSS过渡(或jquery),并在单击后应用新位置.

稍后您可能希望不止一个仍然可见并重新定位..

所以你可能想看一下可以处理这个以及更多情况/布局的伟大Isotope插件