Суть вопроса: помогите реализовать такой, интересный hover эффект. При наведении на другой элемент навигации, нижняя линия должна увеличиваться в размере чтобы точка медленно передвинулась под элемент под hover. Например: Наводим на пункт Семья получаем: длина линия увеличена, позиция точки ровно в центре под пунктом Семья. Ниже приведен javascript код, пытался переделать код MagicLine плагина под себя. Но работает неправильно
var $el, leftPos, newWidth, rightPos,
$mainNav = $("#magicLineNav");
$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$($magicLine)
.width($(".nav-main").width()/2)
.css("left", 0)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#magicLineNav li a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
header .nav-main {
display: inline-block;
vertical-align: middle;
position: relative;
}
header .nav-main ul {
padding-left: 0;
margin-left: 160px;
margin-bottom: 0;
float: left;
margin-top: 18px;
padding-bottom: 7px;
}
header .nav-main ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
header .nav-main ul li:last-child {
margin-right: 0;
}
header .nav-main ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
font-size: 1rem;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
position: relative;
text-transform: uppercase;
}
header .nav-main ul li a:after {
content: '';
position: absolute;
bottom: -9px;
right: 0;
height: 2px;
width: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
header #magic-line {
position: absolute;
bottom: -2px;
left: 0;
height: 1px;
background: #fff;
}
header #magic-line:after {
width: 7px;
height: 7px;
position: absolute;
background: #fff;
content: "";
right: 0;
top: -3px;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
<nav class="nav-main hidden-xs">
<div class="h-name"><h1>Lorem Lorem lorem</h1></div>
<ul class="clearfix" id="magicLineNav">
<li class="active"><a href="index.html">О себе</a></li>
<li><a href="family.html">СЕМЬЯ</a></li>
<li><a href="gallery.html">Галерея</a></li>
</ul>
</nav>
</header>