jquery - Magicline 边框动画 - 从事件类开始动画

Question

我正在尝试使用边框动画(来自 CSSTricks 的 MagicLine)，它工作正常但我面临的唯一挑战是，目前它开始第一个元素并为所有元素设置动画，但是如果我点击任何元素然后我从第一项添加相同的类并删除，但动画仅从第一项开始

这是 JS fiddle

请帮忙!!

注意:或者请建议任何纯 CSS 解决方案来实现这种动画

$(function() {
var $el, leftPos, newWidth;
        $mainNav2 = $("#example-two");
    $("#example-one").append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#example-one li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
    
    $("#example-one > li").click(function () {
    alert(1);
    	var _this = $(this);
      $("#example-one > li").removeClass('current_page_item');
      _this.parent().addClass('current_page_item');
    });
    });

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #2F2626; color: #eee; }

header { padding: 100px 0 0 0; display: block; }
header h1 { width: 960px; margin: 0 auto; }
a { color: #eee; }
a:hover { color: white; }

.nav-wrap { 
	margin: 50px auto; 
	background-color: rgba(0,0,0,0.6); 
	border-top:    2px solid white; 
	border-bottom: 2px solid white; 
}

/* Clearfix */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */



/* Example One */
#example-one { 
	margin: 0 auto; 
	list-style: none; 
	position: relative; 
	width: 960px; 
}
#example-one li { 
	display: inline-block;	
}
#example-one a { 
	color: #bbb; 
	font-size: 14px; 
	float: left;
	padding: 6px 10px 4px 10px;
	text-decoration: none;
	text-transform: uppercase;
}
#example-one a:hover { 
	color: white; 
}
#magic-line { 
	position: absolute;
	bottom: -2px; 
	left: 0; 
	width: 100px; 
	height: 2px; 
	background: #ff0000;
}
.current_page_item a { 
	color: white !important; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="nav-wrap">
  <ul class="group" id="example-one">
    <li class="current_page_item">
      <a href="#">Home</a>
    </li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
  </ul>
</div>

Answer 1

这是因为您没有在点击事件后设置魔术线元素的数据属性。

添加以下行:

$magicLine.data("origLeft", _this.position().left)
   .data("origWidth", _this.width());

解决方案见下面的代码。

$(function() {
  var $el, leftPos, newWidth;
  $mainNav2 = $("#example-two");

  /*
      EXAMPLE ONE
  */

  /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
  $("#example-one").append("<li id='magic-line'></li>");

  /* Cache it */
  var $magicLine = $("#magic-line");

  $magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

  $("#example-one li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });
  }, function() {
    $magicLine.stop().animate({
      left: $magicLine.data("origLeft"),
      width: $magicLine.data("origWidth")
    });
  });

  $("#example-one > li").click(function() {
    var _this = $(this);
    $("#example-one > li").removeClass('current_page_item');
    _this.parent().addClass('current_page_item');
    // added lines below
    $magicLine.data("origLeft", _this.position().left)
      .data("origWidth", _this.width());
  });
});

* {
  margin: 0;
  padding: 0;
}

body {
  font: 14px Georgia, serif;
  background: #2F2626;
  color: #eee;
}

header {
  padding: 100px 0 0 0;
  display: block;
}

header h1 {
  width: 960px;
  margin: 0 auto;
}

a {
  color: #eee;
}

a:hover {
  color: white;
}

.nav-wrap {
  margin: 50px auto;
  background-color: rgba(0, 0, 0, 0.6);
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}


/* Clearfix */

.group:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

*:first-child+html .group {
  zoom: 1;
}


/* IE7 */


/* Example One */

#example-one {
  margin: 0 auto;
  list-style: none;
  position: relative;
  width: 960px;
}

#example-one li {
  display: inline-block;
}

#example-one a {
  color: #bbb;
  font-size: 14px;
  float: left;
  padding: 6px 10px 4px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

#example-one a:hover {
  color: white;
}

#magic-line {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #ff0000;
}

.current_page_item a {
  color: white !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrap">

  <ul class="group" id="example-one">
    <li class="current_page_item">
      <a href="#">Home</a>
    </li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
  </ul>

</div>