Проблема с анимацией jQuery, добавлено решение

Я работаю над навигационным меню, структура разметки ниже, элемент span добавлен в document.ready: -

<ul id="menu">
        <li class="menu act">Additional Fixture<span class="active"></span></li>
        <li class="menu">list with sub menu
            <ul class="sub-menu">
                <li class="menu">Option one</li>
            <li class="menu">Option two</li>
            <li class="menu">Option three</li>
            <li class="menu">Option four</li>
            <li class="menu">Option five</li>
        </ul>
    </li>
    <li class="menu"">Special Tricast</li>

The span is positioned absolute with a set width and height and contains an arrow image as the background.

Я использую jQuery для анимации изображения диапазона/стрелки, когда пользователь нажимает на класс меню, чтобы переместить активный диапазон за выбранный элемент меню (li) в качестве визуального индикатора для их выбора.

Это отлично работает, когда active (act) установлен в корне li, но если он расположен в любом другом месте списка, например: -

<ul id="menu">
        <li class="menu">Additional Fixture<span class="active"></span></li>
        **<li class="menu act">list with sub menu</li>**
</ul>

Стрелка располагается правильно, когда документ загружается, но не переходит к правильному выбору при нажатии пользователем. Я пробовал и положение, и смещение для моей переменной divLocation, и в настоящее время я использую положение, поскольку смещение не работает даже в корне.

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

Я прошерстила форумы и попробовала кое-что, но, честно говоря, я в тупике и буду очень признательна за любую помощь!

Ниже приведен код jQuery для анимации изображения диапазона/стрелки: -

var divLocation = $(this).position();

$("span.active").animate({
  'top': divLocation.top + topOffset,
      'left': divLocation.left + leftOffset

}, animationSpeed, "linear", function(){ 

$(selectedElement).addClass("text-light"); 
    $(selectedElement).fadeTo("100", opacityIn);


});

menu user-interface jquery position jquery-animate
person KryptoniteDove    schedule 30.08.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я не уверен, есть ли у меня проблема, но проверьте, есть ли в подменю li «позиция: относительная». Это может быть причиной неправильного расположения пролета.

ОБНОВИТЬ

Я думаю, вам следует немного переписать сценарий.

// set height of the main links
var mainLinksHeight = 35;

// get index of the clicked element
var nextLink;

$('#menu li').click(function () {
    nextLink = $(this).index();
    $("span.active").animate({ top: nextLink * mainLinksHeight }, animationSpeed, "linear");
});

Надеюсь, вы сможете изменить этот базовый код под свои нужды.

person Webars    schedule 31.08.2011
comment
подменю является абсолютным, но я буду добавлять код, чтобы кто-то не мог начать с подменю, если я когда-нибудь заставлю его работать;) Вот CSS: - - person KryptoniteDove; 01.09.2011
comment
Вот два примера: при добавлении стрелки к 1-му родителю движение работает нормально, при добавлении ко 2-му li вы можете увидеть разницу. Я хочу знать, как заставить его перемещаться к выбранному элементу независимо от того, где добавлена ​​активная стрелка. kryptonite-dove.com/sandbox/menu/arrow-1st-parent. html kryptonite-dove.com/sandbox/menu/arrow -2nd-parent.html - person KryptoniteDove; 01.09.2011
comment
Спасибо, попробуем и сообщим, как у меня дела! :) - person KryptoniteDove; 01.09.2011
comment
Все еще не работало, когда активный диапазон был добавлен к элементу li в меню › 1. Есть другие идеи? думаю, какое-то уравнение путь вперед. - person KryptoniteDove; 01.09.2011
comment
Хорошая работа, поздравляю! И не могли бы вы проголосовать за мой ответ, так сказать, за идею? :) - person Webars; 02.09.2011
comment
Если бы я мог, говорит, что мне нужно 15 представителей, чтобы сделать это, когда я получу этот «высокий уровень», я бы отметил это, если кто-то не может сделать это от моего имени? :D - person KryptoniteDove; 02.09.2011

arrow_upward
1
arrow_downward

Решение:

Я начал играть с кодом, размещенным ниже, и понял, что усложняю себе жизнь, вставляя span, содержащий изображение стрелки, в сами элементы li. Это сделало текущий элемент li всегда в позиции 0 для диапазона, так что, если бы он находился в узле 3, перемещаясь к узлу 1, он должен был бы перейти к минусовым числам.

На самом деле исправить было довольно просто, я переместил диапазон в начало моего неупорядоченного списка и использовал jQuery .css, чтобы установить начальную позицию изображения при загрузке страницы. Таким образом, мне вообще не пришлось менять код анимации или возиться с уравнениями... математика никогда не была моей сильной стороной ;)

Рабочее решение можно увидеть здесь (http://www.kryptonite-dove.com/sandbox/menu/fix.html) спасибо за помощь!

person KryptoniteDove    schedule 02.09.2011