Переход CSS к плавному переходу элементов за другим элементом скрыт.

Question

Проблема: Могу ли я использовать переход CSS для управления тем, как div перемещается в освобожденное пространство, созданное другим скрытым div.

У меня есть элементы в моем приложении, которые появляются и исчезают (отображение: нет) на основе пользовательских интервалов. Как и ожидалось с дисплеем: нет, иногда смежный элемент будет перемещаться, чтобы занять освобожденное пространство.

Я не против, чтобы в этом случае двигались. Я хотел бы контролировать , как он перемещается. То, что я хотел бы для перехода через css-переход или другой метод, а не просто рывок на место. Это возможно?

Вот сценарий JS, который иллюстрирует сценарий с помощью нажатия кнопки. Когда #red скрыт, я хотел бы видеть, что #blue перемещается в позицию более постепенно. Спасибо.

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

Вот код в 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

Вы можете скрыть красный, сдвинув его к 0 ширина состояния. Это приведет к тому, что правый элемент будет скользить влево.

$('#red').animate({width:'toggle'}); Может использоваться для перемещения его влево.

Вы также можете обернуть #red в другой div, а затем затухать #red, а затем соединить контейнер, чтобы объединить визуальные эффекты.