jquery - 使用 CSS 扩展行

Question

我已经使用 JQuery 制作了一个 AJAX 向导，我正试图让顶部导航指示器正常工作。到目前为止我有这个:

我正在尝试在用户按下“下一步”时延长线路。

我真正想要的是让它动画化到下一步。我最初的方法是让浅灰色线只是“ol”属性的“border”属性，然后在 ol 之后有一个普通的“img”标签，并在图像上设置这些 CSS 属性(这是图像一条小橙色线):

{
position:absolute;
margin-top:-37px;
margin-left:-3px;
height:13px;
width:400px;
}

所以我有一个“继续”功能，它会淡出当前步骤并淡出下一步。这一切都很好。我在想我可以增加这条橙色线的宽度(使用“动画”但问题是它像这样越过步长指示器(小“o”):

有没有更好的方法来做这样的事情？

我知道这是个挑剔的小问题，但任何建议都会很有帮助!

谢谢

更新:顺便说一下，我忘了补充一点，我有很多这样的向导，步骤数各不相同，所以如果我按照我尝试的方式去做，我需要找到长度每一步之间的宽度，这将是很多工作。但如果这是唯一的方法，那么我可以这样做

Answer 1

请参阅此 fiddle ，其中下一个扩展了橙色条:http://jsfiddle.net/maniator/AS63L/

您需要做的是在接下来的每个时间点移除相应的气泡。

---

这是一个更新的 fiddle ，一步一步地完成:http://jsfiddle.net/maniator/AS63L/5/