Jquery Magicline边界动画-从活动类开始动画

我正在尝试使用border动画（MagicLine from），它工作正常，但我面临的唯一挑战是，当前它从第一个项目开始并在所有项目上设置动画，但是如果我单击任何项目，那么我将从第一个项目添加相同的类并删除，但动画仅从第一个项目开始

这是你的电话号码

请帮忙

注意：或者请建议任何CSS专用的解决方案来制作此类动画

$（函数（）{
var$el，leftPos，newWidth；
$mainNav2=$（“#示例二”）；
$（“#示例一”）.append（“
”）；
变量$magicLine=$（“#幻线”）；
$magicLine
.width（$（“.current\u page\u item”）.width（）
.css（“左”（“.current_page_item a”）.position（）.left）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
$（“#示例一li”）.find（“a”）.hover（函数（）{
$el=$（此项）；
leftPos=$el.position（）.left；
newWidth=$el.parent（）.width（）；
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});
}，函数（）{
$magicLine.stop（）.animate({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});    
});
$（“#示例一>li”）。单击（函数（）{
警报（1）；
var_this=$（this）；
$（“#示例一>li”）.removeClass（'当前页面\项'）；
_this.parent（）.addClass（'current_page_item'）；
});
});
*{margin:0；padding:0；}
正文{字体：14px格鲁吉亚，衬线；背景：#2F2626；颜色：#eee；}
标题{填充：100px 0；显示：块；}
标题h1{宽度：960px；边距：0自动；}
a{color:#eee；}
a:悬停{颜色：白色；}
.nav wrap{
保证金：50px自动；
背景色：rgba（0,0,0,0.6）；
边框顶部：2件纯白；
底部边框：2件纯白；
}
/*Clearfix*/
.group:在{可见性：隐藏；显示：块；内容：''；清除：两者；高度：0；}之后
*：first child+html.group{zoom:1；}/*IE7*/
/*例一*/
#示例一{
保证金：0自动；
列表样式：无；
位置：相对位置；
宽度：960px；
}
#示例一li{
显示：内联块；
}
#例一{
颜色：#bbb；
字体大小：14px；
浮动：左；
填充：6px 10px 4px 10px；
文字装饰：无；
文本转换：大写；
}
#示例一：悬停{
颜色：白色；
}
#幻线{
位置：绝对位置；
底部：-2px；
左：0；
宽度：100px；
高度：2倍；
背景：#ff0000；
}
.当前页面项目a{
颜色：白色！重要；
}












这是因为您没有在单击事件后设置magic Line元素的数据属性

添加以下行：

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

有关解决方案，请参见下面的代码


$（函数（）{
var$el，leftPos，newWidth；
$mainNav2=$（“#示例二”）；
/*
例一
*/
/*通过JavaScript添加魔线标记，因为如果没有*/
$（“#示例一”）.append（“
”）；
/*缓存它*/
变量$magicLine=$（“#幻线”）；
$magicLine
.width（$（“.current\u page\u item”）.width（）
.css（“左”（“.current_page_item a”）.position（）.left）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
$（“#示例一li”）.find（“a”）.hover（函数（）{
$el=$（此项）；
leftPos=$el.position（）.left；
newWidth=$el.parent（）.width（）；
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});
}，函数（）{
$magicLine.stop（）.animate({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});
});
$（“#示例一>li”）。单击（函数（）{
var_this=$（this）；
$（“#示例一>li”）.removeClass（'当前页面\项'）；
_this.parent（）.addClass（'current_page_item'）；
//在下面添加了行
$magicLine.data（“origLeft”，_this.position（）.左）
.data（“origWidth”，_this.width（））；
});
});
*{
保证金：0；
填充：0；
}
身体{
字体：14px格鲁吉亚，衬线；
背景:#2F2626；
颜色：#eee；
}
标题{
填充：100px0；
显示：块；
}
收割台h1{
宽度：960px；
保证金：0自动；
}
a{
颜色：#eee；
}
a:悬停{
颜色：白色；
}
.导航包裹{
保证金：50px自动；
背景色：rgba（0,0,0,0.6）；
边框顶部：2件纯白；
底部边框：2件纯白；
}
/*Clearfix*/
.小组：之后{
可见性：隐藏；
显示：块；
内容：“；
明确：两者皆有；
身高：0；
}
*：第一个子+html.group{
缩放：1；
}
/*IE7*/
/*例一*/
#例一{
保证金：0自动；
列表样式：无；
位置：相对位置；
宽度：960px；
}
#例一李{
显示：内联块；
}
#例一a{
颜色：#bbb；
字体大小：14px；
浮动：左；
填充：6px 10px 4px 10px；
文字装饰：无；
文本转换：大写；
}
#示例一：悬停{
颜色：白色；
}
#幻线{
位置：绝对位置；
底部：-2px；
左：0；
宽度：100px；
高度：2倍；
背景：#ff0000；
}
.当前页面\项目a{
颜色：白色！重要；
}












这是因为您没有在单击事件后设置magic Line元素的数据属性

添加以下行：

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

有关解决方案，请参见下面的代码


$（函数（）{
var$el，leftPos，newWidth；
$mainNav2=$（“#示例二”）；
/*
例一
*/
/*通过JavaScript添加魔线标记，因为如果没有*/
$（“示例一”）.appen