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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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