Анимация border

239

08 августа 2017, 16:00

Здравствуйте!

Есть вот такое меню:

<ul>
<li><a class="active" href="">пункт 1</a></li>
<li><a href="">пункт 2</a></li>
<li><a href="">пункт 3</a></li>
<li><a href="">пункт 4</a></li>
</ul>

Для активного пункта меню добавляется класс active:

.active {
    border: 2px solid #927253;
    border-radius: 20px;
}

Подскажите, как сделать так, чтобы при наведении на любой из пунктов рамка (класс active) плавно перемещалась от предыдущего пункта к текущему? Что-то вроде slide эффекта для рамки от одного пункта меню к другому.

Answer 1

https://jsfiddle.net/6d2sj5Lb/1/

Попробуйте так:

 <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
       .active { 
            border: 2px solid #927253; 
            border-radius: 20px; 
            display: inline-block; 
            width: 50px; 
            height: 15px; 
        } 
    </style> 
    </head> 
    <body> 
        <div class="active"></div> 
        <ul> 
            <li> 
                <a href="" class="first">пункт 1</a> 
            </li> 
            <li><a href="">пункт 2</a></li> 
            <li><a href="">пункт 3</a></li> 
            <li><a href="">пункт 4</a></li> 
        </ul> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
        <script> 
            var offset = $('.first').offset(); 
            $('.active').offset({top: offset.top + 1, left: offset.left}); 
     
            $('a').mouseover(function () { 
                var offset = $(this).offset(); 
                $('.active').animate({ 
                    top: offset.top - 7, 
                    left: offset.left - 8 
                }, 900); 
            }); 
        </script> 
    </body> 
    </html>

Скорость перемещения можно менять во втором параметре функции animate()