jquery animated border on hover

Question

Th function works almost fine.

The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

What I need to fix?

• on mouseleave or mouseout the highlighted border should go back to the active item
• the active item should always be the starting highlighted one.

if you need more info please ask I'm not sure what I'm missing.

$(function() {

  $(".app-promo-img-align:first").addClass("active");

  $('.app-promo-images').find('.app-promo-img-align').click(function(e) {
    e.preventDefault;
    $(".app-promo-img-align").removeClass("active");
    $(this).addClass("active");
  });

  var $el, leftPos, newWidth,
    $mainNav = $(".menu");

  $mainNav.append("<div id='magic-line'></div>");
  var $magicLine = $("#magic-line");

  $magicLine
    .width($(".app-promo-img-align.active").width())
    .css("left", $(".app-promo-img-align.active a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

  $(".menu li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });

  }).click(function() {
    $mainNav.find('li').removeClass('active');
    $(this).parent().addClass('active');
    $magicLine.animate({
      left: $(".app-promo-img-align.active a").position().left,
      width: $(".app-promo-img-align.active").width()
    });
  });
 

  $('.menu li:not(".app-promo-img-align.active")').hover(
    function() {
      $('#magic-line').addClass('hover');
    },
    function() {
      $('#magic-line').removeClass('hover');
    }
  );



});

.bg {
  height: 300px;
  background: #000;
  padding-top: 50px;
}

.menu {
  padding: margin: 0 auto;
  list-style: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  width: 100%;
}

.menu li {
  display: inline-block;
}

.menu li a {
  background: #bbb;
  width: 80px;
  height: 80px;
  display: block;
  float: left;
  text-decoration: none;
  text-transform: uppercase;
}

.menu li a:hover {
  color: white;
}

#magic-line {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100px;
  height: 4px;
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out
}

#magic-line.current_page_item {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;
}

#magic-line.hover {
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out;
  transition: background 400ms ease-in-out;
}

.app-promo-img-align a {
  position: relative;
}

.app-promo-img-align.active a {
  width: 93px;
  height: 93px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
  <div class="nav-wrap">
    <ul class="group menu app-promo-images" id="example-one">
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
    </ul>
  </div>
</div>

Answer 1

Added an unhover behavior.

$(function() {

  $(".app-promo-img-align:first").addClass("active");

  $('.app-promo-images').find('.app-promo-img-align').click(function(e) {
    e.preventDefault;
    $(".app-promo-img-align").removeClass("active");
    $(this).addClass("active");
  });

  var $el, leftPos, newWidth,
    $mainNav = $(".menu");

  $mainNav.append("<div id='magic-line'></div>");
  var $magicLine = $("#magic-line");

  $magicLine
    .width($(".app-promo-img-align.active").width())
    .css("left", $(".app-promo-img-align.active a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

  $(".menu li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });

  }, function(){
  $el = $('li.active');
  console.log($el);
    leftPos = $el.position().left;
    newWidth = $el.width();
    console.log(leftPos, newWidth);
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });
  }).click(function() {
    $mainNav.find('li').removeClass('active');
    $(this).parent().addClass('active');
    $magicLine.animate({
      left: $(".app-promo-img-align.active a").position().left,
      width: $(".app-promo-img-align.active").width()
    });
  });
 

  $('.menu li:not(".app-promo-img-align.active")').hover(
    function() {
      $('#magic-line').addClass('hover');
    },
    function() {
      $('#magic-line').removeClass('hover');
    }
  );



});

.bg {
  height: 300px;
  background: #000;
  padding-top: 50px;
}

.menu {
  padding: margin: 0 auto;
  list-style: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  width: 100%;
}

.menu li {
  display: inline-block;
}

.menu li a {
  background: #bbb;
  width: 80px;
  height: 80px;
  display: block;
  float: left;
  text-decoration: none;
  text-transform: uppercase;
}

.menu li a:hover {
  color: white;
}

#magic-line {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100px;
  height: 4px;
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out
}

#magic-line.current_page_item {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;
}

#magic-line.hover {
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out;
  transition: background 400ms ease-in-out;
}

.app-promo-img-align a {
  position: relative;
}

.app-promo-img-align.active a {
  width: 93px;
  height: 93px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
  <div class="nav-wrap">
    <ul class="group menu app-promo-images" id="example-one">
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
    </ul>
  </div>
</div>

Answer 2

Well, the most simple thing would be to just move your line in the same way to the active element on mouseout.

$(function() {

  $(".app-promo-img-align:first").addClass("active");

  $('.app-promo-images').find('.app-promo-img-align').click(function(e) {
    e.preventDefault;
    $(".app-promo-img-align").removeClass("active");
    $(this).addClass("active");
  });

  var $el, leftPos, newWidth,
    $mainNav = $(".menu");

  $mainNav.append("<div id='magic-line'></div>");
  var $magicLine = $("#magic-line");

  $magicLine
    .width($(".app-promo-img-align.active").width())
    .css("left", $(".app-promo-img-align.active a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

  $(".menu li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });

  }).click(function() {
    $mainNav.find('li').removeClass('active');
    $(this).parent().addClass('active');
    $magicLine.animate({
      left: $(".app-promo-img-align.active a").position().left,
      width: $(".app-promo-img-align.active").width()
    });
  }).on('mouseout', function() {
    $el = $(".app-promo-img-align.active a");
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });
  });


  $('.menu li:not(".app-promo-img-align.active")').hover(
    function() {
      $('#magic-line').addClass('hover');
    },
    function() {
      $('#magic-line').removeClass('hover');
    }
  );



});

.bg {
  height: 300px;
  background: #000;
  padding-top: 50px;
}

.menu {
  padding: margin: 0 auto;
  list-style: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  width: 100%;
}

.menu li {
  display: inline-block;
}

.menu li a {
  background: #bbb;
  width: 80px;
  height: 80px;
  display: block;
  float: left;
  text-decoration: none;
  text-transform: uppercase;
}

.menu li a:hover {
  color: white;
}

#magic-line {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100px;
  height: 4px;
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out
}

#magic-line.current_page_item {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;
}

#magic-line.hover {
  background: #fe4902;
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out;
  transition: background 400ms ease-in-out;
}

.app-promo-img-align a {
  position: relative;
}

.app-promo-img-align.active a {
  width: 93px;
  height: 93px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
  <div class="nav-wrap">
    <ul class="group menu app-promo-images" id="example-one">
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
      <li class="app-promo-img-align">
        <a href="#"></a>
      </li>
    </ul>
  </div>
</div>