Перемещение и растворение блока

158
03 сентября 2019, 22:30

Как сделать, чтобы при нажатии на кнопку блок начал плавно перемещаться вправо и одновременно как бы растворяясь исчезнул?

<div style="width:200px;height:100px;border:1px solid black;" class="disolved"></div>
<button>растворить блок</button>

Js

$('button').click(function(){
  //что делать?
  });
Answer 1

$('button').click(function() { 
  $(".block").addClass("slide-and-hide"); 
});
.block { 
  width: 200px; 
  height: 100px; 
  border: 1px solid black; 
  background: green; 
} 
.slide-and-hide { 
  opacity: 0; 
  margin-left: calc(100% - 200px); 
  transition: opacity 3s, margin-left 3s; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="block"></div> 
<button>растворить блок</button>

READ ALSO
Идентификатор или сложный селектор

Идентификатор или сложный селектор

Предположим есть элемент header расположенный непосредственно в body и являющийся шапкой сайтаВ CSS можно обращаться к нему как body > header, в то же время...

107
Можно ли как-то реализовать закрытие сайта по кнопке?

Можно ли как-то реализовать закрытие сайта по кнопке?

Например я хочу сделать кнопку, которая автоматически закрывал бы мой сайтЭто реально вообще?

111
jQuery, условие Если все div имеют display none то

jQuery, условие Если все div имеют display none то

Скажите пожалуйста, как написать условие, если у всех div списка стоит display: none то что то сделать, а если не у всех, то ничего не делатьСейчас...

108
Удаление пользователя ASP.NET Identity

Удаление пользователя ASP.NET Identity

Пытаюсь удалить пользователя:

110