Как сделать что бы круг анимационно падал в низ к блоку? и так же потом на верх подымался

169

22 декабря 2018, 21:00

<div class="menu-list">
                                <div class="row">
                                    <span class="circle-list-menu-hover"></span>
                  <span class="circle-dropdown"></span>
                                    <div class="col-md-12 change-block-for-fixed-top">
                                        <div class="change hover-element">
                                            <div class="change-blur" data-hover-background="black"></div>
                                            <p data-hover-color="#F88360" data-color="#FBFCFD">Обменять</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <span class="circle-list-menu-hover"></span>
                                    <div class="col-md-12">
                                        <div class="resrv hover-element">
                                            <div class="change-blur" data-hover-background="black"></div>
                                            <p data-hover-color="#F88360" data-color="#FBFCFD">Курс/Резерв</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <span class="circle-list-menu-hover"></span>
                                    <div class="col-md-12">
                                        <div class="salle hover-element">
                                            <div class="change-blur" data-hover-background="black"></div>
                                            <p data-hover-color="#F88360" data-color="#FBFCFD">Скидки</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <span class="circle-list-menu-hover"></span>
                                    <div class="col-md-12">
                                        <div class="faq hover-element">
                                            <div class="change-blur" data-hover-background="black"></div>
                                            <p data-hover-color="#F88360" data-color="#FBFCFD">Faq</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <span class="circle-list-menu-hover"></span>
                                    <div class="col-md-12">
                                        <div class="partners hover-element">
                                            <div class="change-blur" data-hover-background="black"></div>
                                            <p data-hover-color="#F88360" data-color="#FBFCFD">Партнерам</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <span class="circle-list-menu-hover"></span>
                                    <div class="col-md-12 change-block-for-fixed-bottom">
                                        <div class="applications hover-element">
                                            <div class="change-blur" data-hover-background="black"></div>
                                            <p data-hover-color="#F88360" data-color="#FBFCFD">Заявки</p>
                                        </div>
                                    </div>
                                </div>
                            </div>


html{
  background:red;
}
.menu-list{
    border-left: 1px solid #FFFFFF;
    position: relative;
  background: red;
    .change-block-for-fixed-top{
        position: absolute;
        top: -11px;
    }
    .change-block-for-fixed-bottom{
        position: absolute;
        bottom: -21px;
    }
    .row:nth-child(1){
        padding: 0 0 80px 40px;
        .circle-list-menu-hover{
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            background: #fff;
            left: 11px;
            border-radius: 50%;
            top: 0;
        }
    .circle-dropdown{
            width: 30px;
            height: 30px;
            position: absolute;
            border: 1px solid #fff;
            border-radius: 50%;
            left: 0;
            top: -11px;
        }
    }
    .row:last-child{
        padding: 0 0 0 40px;
        .circle-list-menu-hover{
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            background: #fff;
            left: 11px;
            border-radius: 50%;
            top: -5px;
        }
    }
    .row{
        padding: 0 0 55px 40px;
        font-family: Akrobat-Bold;
        font-size: 20px;
        color: #FBFCFD;
        letter-spacing: 1.24px;
        text-transform: uppercase;
        position: relative;
        .circle-list-menu-hover{
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            background: #fff;
            left: 11px;
            border-radius: 50%;
            top: 11px;
        }
    }
    .change, .resrv, .salle, .faq, .partners, .applications{
        position: relative;
        .change-blur{
            position: absolute;
            width: 100%;
            height: 30px;
            cursor: pointer;
            border-radius: 30px;
            left: -9px;
        }
        .change-blur:hover{
            background-image: linear-gradient(to top, rgba(255, 129, 65, 0.19), rgba(255, 183, 117, 0));
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
        }
    }
}

https://codepen.io/Akilian/pen/PdRrQJ

нужно что бы круг падал ниже при нажатие на меню и подымался на верх при нажатии на верхнее меню)

вообще не шарю как оформить это

Answer 1

 $(document).ready(function() {
         let $menu = $('.hover-element');
         let $circle = $('.circle-dropdown');
         $('.hover-element').click(function() {
            let $y = $(this).offset().top;
            console.log($y)
            $circle.animate({
                    top: $y
            }, 200);
          });
 });