Как сделать, чтобы при нажатии на кнопку блок начал плавно перемещаться вправо и одновременно как бы растворяясь исчезнул?
<div style="width:200px;height:100px;border:1px solid black;" class="disolved"></div>
<button>растворить блок</button>
Js
$('button').click(function(){
//что делать?
});
$('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>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей