使用CSS扩展行

Question

我使用JQuery创建了一个AJAX向导，我试图让顶级导航指示器正常工作。到目前为止，我有这个：

当用户按下“下一步”时，我正在尝试扩展该行。

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

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

所以我有一个“继续”功能，它淡出当前步骤并在下一步淡出。这一切都很有效。我想我可以增加这条橙色线的宽度（使用“animate”但问题是它会超过Step指示器（小“o”），如下所示：

有更好的办法做这样的事吗？

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

谢谢

更新：顺便说一句，我忘了补充说我有很多这些巫师有不同的步骤，所以如果我按照我想要的方式做到这一点，我需要找到它的长度每一步之间的宽度，这将是很多工作。但如果这是唯一的方法，那么我可以做到这一点

Answer 1

看到这个小提琴，下一个扩展橙色栏：http://jsfiddle.net/maniator/AS63L/

您需要做的就是在每次删除适当的气泡时。

---

这是一个更新的小提琴，它一步一步地完成：http://jsfiddle.net/maniator/AS63L/5/

Answer 2

如果没有看到你的标记，我会创建一条线然后绝对定位圆圈，使线条在它们下面，然后你可以扩展线条并使用点的左侧位置来动态设置宽度。

Answer 3

如果是我，我会创建每个整个步骤的图像（包括线条和圆圈），然后使用像http://jquery.malsup.com/cycle/wipe.html这样的插件（参见l2r过渡）来模拟步骤之间的线条动画。这样可以避免定位以及您正在运行的问题。

Answer 4

我使用了一些内联元素：jsFiddle

修改

它已被更新。看看jsfiddle

Answer 5

.meter {background:#eee;height:4px;width:200px;position:relative;margin-top:4px}
.ball,
.bar {position:absolute;background:#f00;}
.ball {border-radius:10px;width:10px;height:10px;margin-top:-3px;left:40px;transition: left .4s}
.bar {height:4px;left:0;width:40px;transition: width .4s}

<div class="meter">
    <div class="ball"></div>
    <div class="bar"></div>
</div>

通过javascript调整.bar宽度和.ball。

此外，您可以使用HTML5，但这对风格来说很痛苦。