jquery动画帮助
我正在尝试构建以下内容，
基本上应该发生的是白色文本下方的深绿色条应根据哪个链接处于活动状态而增大和缩小，例如，目前，THE JOBWALL 链接处于活动状态，因此绿色条跨越该链接的宽度。我怎样才能实现这种效果，是否可以对创建绿色栏的背景图像进行动画处理，以便在页面加载时，该栏从左向右进行动画处理，直到它位于活动页面下方？
任何帮助都会很棒。
I am trying to build the following,
Basically what should happen is the dark green bar underneath the white text should grow and shrink dependent on which link is active, so for example at the moment, THE JOBWALL link is active so the green bar spans the width of that link. How can I achive this affect, is it possible to animate the backgroud-image that would create the green bar so that when the page loads the bar animates from left-right until it rest under the active page?
Any help would be great.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以使用 jQuery 来完成此操作。方法如下。
首先为每个菜单项创建一个元素，该元素将成为绿色栏。您必须使用 CSS 正确定位它。将此元素的背景颜色设置为深绿色，并将宽度设置为零（以便默认情况下不可见）。
然后，为菜单项的 onmouseover 事件提供回调：
在回调中
这将在 200 毫秒的时间内将栏的宽度设置为 60 像素。
You can do this with jQuery. Here's how.
First make an element for each menu item that will be the green bar. You'll have to position it correctly with CSS. Set the background color of this element to your dark green color, and the width to zero (so that it is not visible by default).
Then, provide a callback to the menu items' onmouseover event:
In the callback
This will animate the bar's width to 60px, in a period of 200 ms.
以下是可能适合您的一般想法：
创建一个 ID 为 Whitebar 的 div。风格
它具有正确的高度和宽度，
并设置背景颜色。
在白条中嵌入另一个 div
id 绿色栏。使其宽为
您的页面标题。设置背景颜色
到绿色。
现在使用绿色条动画
标准 jquery 动画技术
如果标题的宽度不相等，您可能需要在动画开始或结束时调整绿条的大小。
编辑：这是一个粗略草图
Here is a general idea that might work for you:
Create a div with id whitebar. Style
it to have correct height and width,
and set the bg color.
Embed another div in whitebar with
id green bar. Make it as wide as
your page titles. Set the bg color
to green.
Now animate the green bar using
standard jquery animation techniques
If the titles are not of equal widths you might need to resize the greenbar at the beginning or end of animation.
EDIT: Here is a rough sketch
我以前从未做过这个，不久前遇到了这个问题，感到好奇，然后自己在 jsfiddle 上尝试了一下。这是我想出的http://jsfiddle.net/robx/dXZxN/4/ 使用几种不同的颜色来制作动画，但您可以轻松地根据您的需要进行调整。
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.