CSS transition to smooth transition of elements after another element is hidden.

Question

Issue: Can I use a CSS transition to control how a div moves into vacated space created by another div being hidden.

I have elements in my app that appear and disappear (display: none) based on user set intervals. As expected with display:none, sometimes an adjacent element will move to occupy the space vacated by .

I don't mind that moves in this case. I would like to control how it moves. What I would like is for to move via a css transition or other method and not just jerk into place. Is this possible?

Here's a JS fiddle that illustrates the scenario via button click. When #red is hidden I would like to see #blue move into position more gradually. Thx.

http://jsfiddle.net/uV6W7/1/

Here's the code in the jsfiddle:

HTML

<div id="red"></div>
<div id="blue"></div>
<p>
<button id="remove" type="button">Remove Red</button>

CSS

#red {
    display: inline-block;
    background-color: red;
    height: 200px;
    width: 200px;
}
#blue {
    display: inline-block;
    background-color: blue;
    height: 200px;
    width: 200px;
}

Javascript

$("#remove").on("click", function(event){
    if($('#remove').text()=="Remove Red") {
      $('#red').fadeOut();
      $('#remove').html("Restore Red");
    }else {
      $('#red').fadeIn();
      $('#remove').html("Remove Red");
    }
});

Answer 1

You could hide red by sliding it to a 0 width state. This would cause the right element to seem to slide into the place of the left.

$('#red').animate({width:'toggle'}); Can be used to slide it to the left.

You can also wrap #red in another div and then fade #red and afterwards slide the container to combine the visual effects.