当div移动以填充其他div消失的空白时如何为div设置动画 [英] How to animate divs when they move to fill empty space left by other divs that fade out

问题描述

我有一组div，每个div对应一组类别.当我单击过滤器时，这将更改div的类，并根据这些类别使它们可见或隐藏.我控制着div淡入/淡出的方式，它们缓慢而优美地进行，但是每次div消失时，那些未更改的div都会突然移动以填充那些被隐藏的div所留下​​的空白.

I have a set of divs, each corresponds to a set of categories. When I click on a filter, this will change the classes of the divs and make them vissible or hidden depending on those categories. I control how the divs fade in/out and they do it slow and nicely but everytime the divs disappear the ones that are left unchanged move abruptly to fill the empty space left by the ones that were hidden.

如何在其他div消失并留有空白之后平滑未隐藏的div的移动?

How can I smooth the movement of the divs that weren't hidden after the other ones disappear and left an empty space?

 //Before this goes a long function that decides wich divs will get their class changed
 $('#work-container > div[class*=visible]').fadeIn('slow','swing');
 $('#work-container > div[class*=hidden]').fadeOut('slow','swing');

http://jsfiddle.net/Ccswn/3/玩弄小玩意儿

推荐答案

我建议使用animate()代替fadeOut():

$('div').click(
    function() {
        $(this).animate({
            'height': 0,
            'opacity': 0
        }, 750, function() {
            $(this).remove();
        });
    });​

JS小提琴演示.

已编辑以合并jQuery/CSS解决方案:

Edited to incorporate a jQuery/CSS solution:

将.item的CSS更改为包括以下内容:

Change the CSS for .item to include the following:

.item{
    /* other css removed for brevity */
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}

并将a.hidden更改为以下内容:

.hidden {
    width: 0; /* reset everything that might affect the size/visibility */
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}

使用以下jQuery:

With the following jQuery:

// content animate
$('#work-container > div[class*=hidden]').addClass('hidden');
return false;

JS小提琴演示.

然后一切似乎都可以正常运行.尽管我没有尝试遵循上面块中的.addClass('visible')所做的事情，但是我还是把它留了下来.

And then everything seems to work as you want. Though I've not tried to follow what the .addClass('visible') in the block above does, but I left it alone.

这确实需要一个支持CSS转换的浏览器(并支持opacity)，因此在您的用例中可能并不完美.

This does require a browser that supports CSS transitions (and has support for opacity), though, so it might not be perfect in your use-case.

这篇关于当div移动以填充其他div消失的空白时如何为div设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！