css 可能 jquery 帮助答案

【问题标题】：css possibly jquery helpcss 可能 jquery 帮助
【发布时间】：2011-04-11 16:34:00
【问题描述】：

我的设计师设计了以下导航

他希望实现它，以便导航下方的黑条在页面加载时动画到当前页面（想想进度条）。没有明显的 PHP 我可以对它进行排序，以便当前的 a 有一个类，这样我就可以识别当前页面，但是我不知道如何为导航下方的栏设置动画，有人有什么建议吗？

【问题讨论】：

你熟悉jquery吗？
我知道 jquery 是的，但我不确定如何让它动画到正确的位置
你的意思是你想让黑条在页面加载时滑到当前页面链接吗？在这种情况下，我不完全确定您所说的“动画”是什么意思。
@Eric 这正是我的意思。
您可以使用分层 div 方法来做到这一点。有一个不透明度为 0 的链接，然后使用 jquery .animate 以所需的背景颜色向右滑动一个 div z-indexed 在它下面。除此之外，也许还有颜色插件？

标签： javascript jquery css dom-manipulation

【解决方案1】：

对不起，我会在这里发帖。

我认为您需要在 div 中包含一个 div。外部 div（代表导航下方的整行）需要是总导航的宽度。然后，您可以使用 jquery 将内部 div（进度条）设置为与上面的 nav 元素相同的宽度，并将其左侧位置设置为您已添加类的导航项的位置。

类似的东西

$(document).ready(function(){

    $('.selectedNav').click(function(){

    var navWidth = $(this).width();
    var posLeft = $(this).position();

    $('#innerDiv').animate({'width': navWidth, 'left': posLeft.left});

    });

});

【讨论】：

【解决方案2】：

制作一个绿色框的图像，其中的文本和条“切掉”（例如透明）
将其放入<div style="position:relative;">
在其中放置另一个 div：<div style="position:absolute;top:0px;left:0px;height:100%;" id="progress">
将“进度”div 的宽度设置为第 1 步的 90 像素，第 2 步的 195 像素，第 3 步的 278 像素，第 4 步的 414 像素
如果需要，使用 jQuery 的动画设置 with：$.animate({width: 195}) 使其滚动。

这样做，你的栏和文本都会移动。

如果你不关心文本，跳过图像部分，只做一个灰色的 div 做同样的事情。

有关动画效果，请参见 www.vouchr.com。

【讨论】：

【解决方案3】：

你可以试试这个 jquery 插件： http://grasshopperpebbles.com/ajax/a-jquery-progress-bar-plugin/

【讨论】：