Анимация плавающих элементов после удаления других элементов со страницы

Question

У меня есть ситуация, когда я нажимаю на divs с определенным классом при нажатии кнопки. Например, если кто-то должен был нажать «Скрыть красный», я использую jQuery, чтобы скрыть все div с классом «красный». Эти divs плавают влево и имеют ширину 33%. Когда красные скрыты, другие divs с классом «синий», которые заполняют пространство для «красных» div, которые просто исчезли. Это то, что я хочу, но я хотел бы, чтобы оставшиеся divs плавно переходили в недостающее пространство вместо «прыгать», чтобы заполнить недостающее пространство. Есть ли способ сделать это с помощью jQuery?

Ниже все, что я делаю, чтобы исчезнуть DIV из:

JavaScript

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

А вот как форматируются коробки:

CSS

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

Here - ссылка на пример.

Answer 1

Попробуйте использовать .animate() установки duration в 2500, "easing" к "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