Плавный addClass и removeClass?

Question

[Mesuti]

Привет!
При нажатии на дом или квартира, происходит резкое удаление и добавление стиля display: none;
Как сделать это плавно?


Песочница:
https://jsfiddle.net/Mesuti/u9wmkqgs/

p.s. интересны варианты на css и на js.
Спасибо всем ответившим!

Answer 1

[Night]

jquery
$('.el').show('fast');

Comments

[Mesuti]

помимо fast какие есть еще варианты?

[Night]

в документации много примеров

[Mesuti]

ага, разобрался.
Спасибо!!!

[ThunderCat]

Тогда уж лучше fadeIn(500); fadeOut(500);

Answer 2

[Stalker_RED]

Вот список свойств, которые можно анимировать. Свойство display вообще не анимируется. Но вы можете вместо этого менять прозрачность (opacity) или высоту блока, или плавно менять ему position чтобы он откуда-то приезжал.

Comments

[Mesuti]

Тогда новый вопрос.
Есть 2 результата.
При display none они были на одном месте.
А при opacity они занимают прежнее место по порядку.
Как сделать так, чтобы они не нажимались, если один исчез? position сделаю друг над другом и при клике добавлю z-index

[Mesuti]

Если сделаю плавность, то и приезжать он будет плавно. А это уже не то. Нужен эффект появления

В идеале я планировал сделать что-то вроде вкладок с переключателем, но не качать плагины

[Stalker_RED]

Александр Сорокин, чтобы совсем исчезали тоже можно

.hide {
  animation: fadeAndHide 2s forwards;
}
@keyframes fadeAndHide {
    0%   {opacity: 1;}
    99%  {opacity: 0;}
    100% {opacity: 0; display: none;}
}

https://www.w3schools.com/css/css3_animations.asp