0

I have three divs with the following properties:

div.main-box {
    width: 100px;
    height: 100px;
    display: inline-block;
    padding: 20px;
    margin: 20px;
    border: 1px solid black;
}

They are side-by-side on the page:

 __  __  __
|__||__||__|

I remove two of them at a time based on a user interaction (e.g., the user clicks the third, and the first two disappear). After they are removed, the remaining box moves to the center.

As it is now, the box simply appears in the center. I would like to animate this movement.

Here is a jsFiddle for what I have now:

http://jsfiddle.net/4s4v9/

Is what I am asking possible? Thanks for your help!

Update:

What I'm asking doesn't seem to be possible. Can I hold the remaining box in place after the other boxes are removed and then animate it's movement?

apparatix
  • 1,492
  • 7
  • 22
  • 37

2 Answers2

1

Did you mean like this?

$('a#change-boxes').click(function () {
    var i = 1;
    $('div.main-box').each(function () {
        if (i <= 2) {
            $(this).hide(500, function(){
            $(this).remove();
            });
        }
        i++;
    });
});

Check here: http://jsfiddle.net/GmaPE/

Jon P
  • 826
  • 1
  • 7
  • 20
0

To make something animate, you will need a property that can be manipulated, for example, "left" or "margin-left". You can animate inline or inline-block elements without positioning.

Try relative positioning instead. Set the parent container element (add one if you don't already have):

position: relative;

Set all child elements:

position: absolute;
top: 0;
left: 0px; // 200px, 400px, etc. respectively

Then do a fadeOut or hide on the elements:

$('#selector-for-box-1-and-2')
.fadeOut('slow', function() {

})

Then add in the animation in the animation complete function:

$('#selector-for-box-1-and-2')
.fadeOut('slow', function() {
    $('#selector-for-box-3').animate({
        left: 0px
    }, 1000);
})

You can also apply jQuery.masonry plugin, the animation will be handled automatically when you remove any elements.

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
  • This solution would work, but the boxes inside are have `display:inline-block` so that when the screen width decreases they go from side-by-side to top-to-bottom. I can't set the `left` attribute, therefore. – apparatix Jan 30 '13 at 11:53
  • Actually, just resorted to fading out all the boxes, removing two, and then fading the remaining one back. However, jQuery.masonry would have worked; I was just lazy. :) – apparatix Jan 31 '13 at 02:27