主页 / 问题 / 685469
Accepted
drtvader
Asked:2020-06-30 13:37:41 +0000 UTC2020-06-30 13:37:41 +0000 UTC

如何制作这样的动画？

  • 772

如何制作这样的动画？
视频
您需要制作相同的链接交替外观和相同的隐藏。一切都发生在悬停上（悬停 - 出现，移除光标 - 消失）

$(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/

javascript

1 个回答

  1. Best Answer

    这是您想要的示例：

    $(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>

    样式可以根据您的喜好进行定制。

    • 3

相关问题