jquery - jquery动画帮助

Question

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

基本上应该发生的是白色文本下方的深绿色条应该根据哪个链接处于活动状态而增长和缩小，因此例如目前，THE JOBWALL 链接处于活动状态，因此绿色条跨越该链接的宽度。我怎样才能达到这种效果，是否可以对将创建绿色条的背景图像进行动画处理，以便在页面加载时，条从左到右进行动画处理，直到它停留在活动页面下方？

任何帮助都会很棒。

Answer 1

这是一个可能对您有用的一般想法：

1. 创建一个 id 为 whitebar 的 div。将其设置为具有正确的高度和宽度，并设置背景颜色。

2. 将另一个 div 嵌入到带有 id 绿条的 whitebar 中。使其与您的页面标题一样宽。将背景颜色设置为绿色。

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

如果标题的宽度不同，您可能需要在动画开始或结束时调整绿条的大小。

编辑：这是一个粗略的草图

Answer 2

你可以用 jQuery 做到这一点。就是这样。

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

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

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

在回调中

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

这将在 200 毫秒内将条形的宽度设置为 60 像素。

Answer 3

I've never done this one before, and ran across the question a while ago, got curious, and went to try it out myself on jsfiddle. Here is what I came up with http://jsfiddle.net/robx/dXZxN/4/ using several different colors to animate with, but you can easily adjust to your needs.