Animate floating elements after removing other elements from page

Question

I have a situation where I am fading out divs with a certain class when a button is clicked. For example, if someone were to click "Hide Red," I use jQuery to hide all of the divs with a class of "red." These divs float left and have a width of 33%. When the reds are hidden, the other divs with the class "blue" that fill in the space for the "red" divs that were just faded out. This is what I am wanting to happen, but I would like to have the remaining divs smoothly transition into the missing space instead of "jumping" in to fill the missing space. Is there a way to do this using jQuery?

Below is all I am doing to fade the div out:

JAVASCRIPT

$(".hide_red").click(function(){
  $(".red").fadeOut();
})

And here is how the boxes are formatted:

CSS

.box {
  float:left;
  width: 33%;
  height: 80px;
}

Here is a link to an example.

Answer 1

Try using .animate() setting duration to 2500 , "easing" to "linear"

$(".show_all").click(function(){
  $(".red, .blue").fadeIn(1000);
})
$(".hide_red, .hide_blue").click(function(){
  $("." + this.className.split("_")[1])
  .animate({
    width:"toggle",
    opacity:"toggle"
  }, 2500, "linear");
})

codepen http://codepen.io/anon/pen/YywBNQ