jquery动画帮助

Question

我正在尝试构建以下内容，

基本上应该发生的是白色文本下面的深绿色条应该根据哪个链接处于活动状态而增长和缩小，因此例如此时，JOBWALL链接处于活动状态，因此绿色条形跨越该链接的宽度。如何实现这种效果，是否可以为创建绿色条的背景图像设置动画，以便在页面加载条形图时从左到右动画直到它停留在活动页面下？

任何帮助都会很棒。

Answer 1

以下是一个可能适合您的一般概念：

1. 创建一个id为whitebar的div。样式 它有正确的高度和宽度， 并设置bg颜色。

2. 在whitebar中嵌入另一个div id绿色酒吧。使其宽广 你的页面标题。设置bg颜色 绿色。

3. 现在使用绿色条设置动画 标准的jquery动画技术

如果标题的宽度不相等，则可能需要在动画的开头或结尾处调整绿条的大小。

编辑：这是rough sketch

Answer 2

你可以用jQuery做到这一点。这是怎么回事。

首先为每个将成为绿色条的菜单项创建一个元素。你必须使用CSS正确定位它。将此元素的背景颜色设置为深绿色，将宽度设置为零（以便默认情况下不可见）。

然后，提供对菜单项'onmouseover事件的回调：

 <div class="menu-item" onmouseover="menuRollover(this)" >...</div>

在回调中

function menuRollover(el){
    $(el).find(".green-bar").animate({'width':60}, 200)

这会将条形图的宽度设置为60px，时间为200毫秒。

Answer 3

我以前从来没有做过这个，并且前一段时间碰到了这个问题，好奇，然后在jsfiddle上自己尝试一下。以下是我提出的http://jsfiddle.net/robx/dXZxN/4/使用多种不同颜色进行动画处理的方法，但您可以根据自己的需要轻松调整。