<div style="margin-top:90px;">
<div class="sykyba_input" onclick="test()">Test</div>

</div>
<div class="lol">Click</div>
<script>
function test() {
$('.lol').animate({marginLeft: '300', width: '150', height: '150', opacity: '0.1'}, 400);
$('.lol').animate({marginTop: '300', width: '40', height: '40', opacity: '0.5'}, 400);
$('.lol').animate({marginLeft: '0', width: '100', height: '100', opacity: '0.2'}, 400);
$('.lol').animate({marginTop: '0', width: '50', height: '50', opacity: '0.4'}, 200);
$('.lol').animate({marginTop: '20', width: '50', height: '50', opacity: '0.4'}, 300);
$('.lol').animate({marginTop: '0', width: '50', height: '50', opacity: '0.4'}, 200);
$('.lol').animate({marginTop: '12', width: '50', height: '50', opacity: '0.4'}, 300);
$('.lol').animate({marginTop: '4', width: '50', height: '50', opacity: '0.4'}, 200);
$('.lol').animate({marginTop: '0', width: '50', height: '50', opacity: '0.4'}, 100);
}
</script>

<style>
.lol {
width:50px;
background:black;
color:white;
height:50px;
opacity: 0.5;
position:fixed;
}
.sykyba_input {
padding: 4px 4px 4px 4px;
background: rgba(0, 0, 0, 0.5);
border: 0px;
color: white;
border-radius: 2px;
width:42px;
}
.sykyba_input:hover {
padding: 4px 4px 4px 4px;
background: rgba(0, 0, 0, 0.8);
border: 0px;
color: white;
border-radius: 2px;
width:42px;
}
</style>