0

Как сделать такую анимацию?
Видео
Нужно сделать такое же поочередное появление ссылок, и такое же скрытие. Все происходит на 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/

6
  • Линки должны скрыться, когда жмешь на одну из социальных сетей, правильно понял? 30 июн 2017 в 6:26
  • @Klimenkomud На видео немного не так показано, линки скрываются когда прекращается событие hover
    – drtvader
    30 июн 2017 в 6:37
  • Так <code>:hover</code> это не событие, это псевдокласс, "состояние элемента", и это состояние "прекращается" как только вы убираете курсор с элемента, по сути дела, вы хотите чтобы линки скрывались, после того как с них убрали курсор? 30 июн 2017 в 6:44
  • @Klimenkomud да, когда курсор увел, то скрываются.
    – drtvader
    30 июн 2017 в 6:46
  • В таком случае, вам необходимо использовать события mouseover/mouseout. При mouseover на сердечке изменяете атрибут visibility или display(с hidden/none на visible/block(or inline-block)) у блока, в котором лежат социальные ссылки 30 июн 2017 в 6:48

1 ответ 1

3

Вот приблизительно такой пример как вы хотели:

$(document).ready(function() {
    $('.share__link').hover(function(i) {
        $(this).fadeOut(250);
        var icons = $('.share__link-social').get().reverse();
        $(icons).each(function(i,t){
            var $this = $(t);
            setTimeout(function(){
                $this.delay((i++) * 150).fadeTo(150, 1);
            },150);

        });
    });
    $('.share__link-social').on('mouseover',function(){
        $(this).find('.span_before').animate({
                opacity: 1,
                marginTop: '0px',
            }, 150, function() {
            //complate function
        });
    });
    $('.share__link-social').on('mouseleave',function(){
        $(this).find('.span_before').animate({
                opacity: 0,
                marginTop: '10px',
            }, 150, function() {
            //complate function
        });

    });
});
.share {
    position: relative;
    margin-top: 55px;
}

.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 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 15px;
    opacity: 0;
}
.share__link-social>.span_before{
    position: absolute;
    top: -47px;
    background: #959798;
    padding: 5px 15px;
    border-radius: 10px;
    left: -54px;
    color: #FFFFFF;
    width: 90px;
    text-align: center;
    opacity: 0;
    margin-top: 10px;
}
.share__link-social>.span_before>span{
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: solid 10px #959798;
    border-right: solid 8px transparent;
    border-left: solid 8px transparent;
    border-bottom: solid 4px transparent;
    bottom: -14px;
    left: 50px;
}
<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">
            <span class="span_before"><span></span>Wats App</span>
            1
        </a>
        <a href="javascript:void(0);" class="share__link-social share__link-social--facebook" title="share">
            <span class="span_before"><span></span>Facebook</span>
            2
        </a>
        <a href="javascript:void(0);" class="share__link-social share__link-social--messenger" title="share">
            <span class="span_before"><span></span>Messanger</span>
            3
        </a>
        <a href="javascript:void(0);" class="share__link-social share__link-social--mail" title="share">
            <span class="span_before"><span></span>Mail</span>
            4
        </a>
    </div>
</div>

Стили можете настроить под ваш вкус.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.