Справка по анимации jquery

Question

Я пытаюсь построить следующее,

По сути, то, что должно произойти, это темно-зеленая полоса под белым текстом должна расти и уменьшаться в зависимости от того, какая ссылка активна, поэтому, например, в данный момент ссылка THE JOBWALL активна, поэтому зеленая полоса охватывает ширину этой ссылки. Как я могу добиться этого эффекта, возможно ли анимировать фоновое изображение, которое создаст зеленую полосу, чтобы при загрузке страницы полоса анимировалась слева направо до тех пор, пока она не окажется под активной страницей?

Любая помощь была бы великолепна.

Answer 1

Вы можете сделать это с помощью jQuery. Вот как.

Сначала создайте элемент для каждого пункта меню, который будет зеленой полосой. Вы должны будете правильно расположить его с помощью CSS. Установите цвет фона этого элемента на ваш темно-зеленый цвет, а ширину на ноль (чтобы он не отображался по умолчанию).

Затем предоставьте обратный вызов для события onmouseover пунктов меню:

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

В обратном вызове

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

Это оживит ширину бара до 60 пикселей в период 200 мс.

Answer 2

Вот общая идея, которая может работать для вас:

1. Создать div с идентификатором whitebar. Стиль иметь правильную высоту и ширину, и установите цвет bg.

2. Вставить еще один div в whitebar с Ид зеленый бар. Сделайте это так же широко, как заголовки вашей страницы. Установите цвет BG зеленый

3. Теперь анимируйте зеленую полосу, используя стандартные методы анимации jquery

Если заголовки не имеют одинаковой ширины, вам может потребоваться изменить размер зеленой полосы в начале или конце анимации.

РЕДАКТИРОВАТЬ: Вот набросок

Answer 3

Я никогда не делал этого раньше, и некоторое время назад наткнулся на вопрос, заинтересовался и сам решил попробовать его на jsfiddle.Вот что я придумал http://jsfiddle.net/robx/dXZxN/4/, используя несколько разных цветов для анимации, но вы можете легко приспособиться к вашим потребностям.