Плавно перемещайте смежные элементы, когда элемент скрывается

Question

Скриптовая ссылка

Когда я нажимаю на зеленый div, все прячется, но зеленый div дергается, как, например, он идет рядом с первым зеленым div с рывком. Можно ли сгладить транзит, чтобы он скользил и занимал свои места прямо рядом с первым зеленым div?

JS:

$('.green').click(function(){
    $('.others').fadeOut();
});

CSS:

.green{ background:green; padding:10px; margin:10px; }
.red{ background:red; padding:10px; margin:10px; }
.blue{ background:blue; padding:10px; margin:10px; }
.green:hover{ cursor:pointer;}
.fade{display:none; opacity:0;}
div{ float:left; }

HTML:

<div class="green"></div>
<div class="red others"></div>
<div class="blue others"></div>
<div class="green"></div>
<div class="red others"></div>
<div class="blue others"></div>

Answer 1

Возможно, вы могли бы поменять свой fadeout() с hide()

$('.green').click(function(){
$('.others').hide(300);


});

Вот ваша обновленная скрипка.

Answer 2

Хитрость заключается в том, чтобы удалить непрозрачность и размер, а затем скрыть его.

$('.green').click(function(){
    $('.others').animate({'opacity':0},200,function(){
        $(this).animate({'width':0},200,function(){
            $(this).hide();
        });
    });
});

Если ваши дивы ниже друг друга, вы можете анимировать height в zero(0),

Answer 3

$('.green').click(function(){
    $('.others').animate({
        "margin-left":0,
        "margin-right":0,
        "padding-left":0,
        "padding-right":0,
        width:0,
    }, 300);
});

http://jsfiddle.net/2un99/5/

Делайте анимацию, очищайте только поля и отступы, и анимируйте ширину до 0, чтобы прилагательные элементы div двигались вдоль

Answer 4

Вы можете попробовать это:

$('.green').click(function(){
    $('.others').fadeOut("slow");
});

ИЛИ ЖЕ

this:$('.green').click(function(){ $('.others').hide("literal"); });