Как сделать такую анимацию?
Видео
Нужно сделать такое же поочередное появление ссылок, и такое же скрытие. Все происходит на hover(навели курсор - показались, убрали курсор- скрылись)
$(document).ready(function() {
$('.share__link').hover(function(i) {
$('.share__link-social').delay((i++) * 500).fadeTo(1000, 1);
$(this).fadeOut(250);
});
});
.share {
position: relative;
}
.share__link {
position: relative;
z-index: 2;
}
.share__hidden {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
}
.share__link-social {
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-size: contain;
margin: 0 15px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="share">
<a href="javascript:void(0);" class="share__link" title="share">
<span class="share__circle"></span>
<span class="share__text">share</span>
</a>
<div class="share__hidden">
<a href="javascript:void(0);" class="share__link-social share__link-social--whats-app" title="share">1</a>
<a href="javascript:void(0);" class="share__link-social share__link-social--facebook" title="share">2</a>
<a href="javascript:void(0);" class="share__link-social share__link-social--messenger" title="share">3</a>
<a href="javascript:void(0);" class="share__link-social share__link-social--mail" title="share">4</a>
</div>
</div>
Работает не так. И после ховера не знаю как скрыть, так же проблема с тач устройствами, там же как-то иначе условие прописать надо.
https://jsfiddle.net/tt1vqakx/