javascript - 悬停时的jquery动画边框

Question

这个功能几乎可以正常工作。

这个想法是当您将鼠标悬停在导航中的不同链接上时，让某种高亮显示(背景或下划线)跟随您，当您将鼠标悬停在不同的链接上时，它会计算出左侧定位和宽度和动画匹配。

我需要修复什么？

• 在 mouseleave 或 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()
    });
  });
 

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

添加了 unhover 行为。

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