Сергей Ракипов,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.block{
height: 100%;
background-color: #54CC2C;
position: relative;
}
.block_inside1{
cursor: pointer;
background-color: #CC2ABC;
}
.block_inside2{
position: relative;
width: 50px;
transform:translateY(-250px);
transition: transform .5s;
z-index: 2;
background-color: #e2e2e2;
}
.test{
width: 50px;
height: 50px;
background-color: #2F2FCC;
left: 50%;
top: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="block">
<div class="block_inside1">test</div>
<div class="block_inside2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, maiores!</div>
<div class="test"></div>
</div>
<script>
var block = document.querySelector(".block");
var block_inside1 = document.querySelector(".block_inside1");
var block_inside2 = document.querySelector(".block_inside2");
function subHover_1() {
var timer;
block.onmouseover = subDown;
block.onmouseout = subUp;
function subDown(event) {
if (event.target.matches(".block_inside1, .block_inside2")) {
clearTimeout(timer);
block_inside2.style.transform = "translateY(" + "20" + "px)";
}
}
function subUp(event) {
if (event.target.matches(".block_inside1, .block_inside2")) {
clearTimeout(timer);
timer = setTimeout(function() {
block_inside2.style.transform = "translateY(" + "-250" + "px)";
}, 300);
}
}
}
subHover_1();
</script>
</body>
</html>