How to animate divs when they move to fill empty space left by other divs that fade out

问题

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.

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

Edit: http://jsfiddle.net/Ccswn/3/ Fiddle of the thing

回答1:

I'd suggest using animate() in place of fadeOut():

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

JS Fiddle demo.

Edited to incorporate a jQuery/CSS solution:

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

And change the a.hidden to the following:

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

With the following jQuery:

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

JS Fiddle demo.

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.

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.

回答2:

you can use show and hide methods:
http://jsfiddle.net/Ccswn/5/

来源：https://stackoverflow.com/questions/10213095/how-to-animate-divs-when-they-move-to-fill-empty-space-left-by-other-divs-that-f

标签

jquery

html

jquery-animate