Условное наведение мышки с помощью плагина jQuery Background-Position - PullRequest
Новая
       17

Условное наведение мышки с помощью плагина jQuery Background-Position

1 голос
/ 06 июля 2010

В настоящее время у меня есть горизонтальное меню раскрывающегося списка с использованием неупорядоченного списка со следующей разметкой HTML: 

<div class="menu">
  <ul>
    <li><a class="tier1" href="#">Top Link 1</a></li>
    <li>
        <a class="tier1" href="#">Top Link 2</a>
        <ul>
            <li><a href="#">Sub Link 1</a></li>
            <li><a href="#">Sub Link 2</a></li>
            <li><a href="#">Sub Link 3</a></li>
        </ul>
    </li>
    <li><a class="tier1" href="#">Top Link 3</a></li>
  </ul>
</div>

CSS слишком длинный, чтобы вставлять его сюда, но он следует той же структуре, которую я использовал целую вечность здесь из CSS Menu Maker - единственное отличие состоит в том, что для подменю элементы списка, у меня они отображаются «встроенными» с шириной, установленной в «auto», и с небольшим отступом влево и вправо, и каждый элемент меню Top Link с классом «tier1» использует CSS Sprites. JQuery, где у меня возникла проблема. Обычно такой подход можно принять: 

function animateMenu() {
  $('.menu li a.tier1').css({backgroundPosition:'0 -60px'});
  $('.menu li a.tier1').hover(
     function() {
        $(this).stop(true, true).animate({backgroundPosition:'0 0'},{duration:400})
        .next('ul').css({display:'none'}).stop(true, true).delay(200).slideDown(400);
     },
     function() {
        $(this).stop(true, true).animate({backgroundPosition:'0 -60px'},{duration:250})
        .next('ul').stop(true, true).slideUp(400);
     }
  );
}

Хотя этот метод работает и визуально выполняет то, что я от него хочу, SubMenu, очевидно, сдвигается назад, когда я отключаю элементы Top Link. Единственным выходом для этого было разделить его на две отдельные функции: 

function animateTopMenu() {
    $('.menu li a.tier1').css({backgroundPosition:'0 -60px'});
    $('.menu li a.tier1').hover(
            function() {
                $(this).stop(true, true).animate({backgroundPosition:'0 0'},{duration:400});
            },
            function() {
                $(this).stop(true, true).animate({backgroundPosition:'0 -60px'},{duration:250});
            }
    );
}

function animateSubMenu(){
    $('.menu li').hover(
            function() {
                $(this).find('ul:first').css({display:'none'}).stop(true, true).delay(200).slideDown(400);
            },
            function() {
                $(this).find('ul:first').stop(true, true).slideUp(400);
            }
    );
}

Это помогает мне сохранять элементы SubMenu с возможностью наведения при наведении мышки на верхнюю ссылку, но в идеале я хотел бы сохранить внешний вид накрытых верхних ссылок при наведении курсора на элементы подменю и возвращаются (и анимируются) в нормальное состояние только после того, как мышь покинула подменю или верхнюю ссылку. Здесь я испытываю трудности. Я мог бы добавить и удалить класс с помощью CSS "background-positon: 0 0! Важный", но тогда эффект анимации теряется.

Я прошу прощения за длинный вопрос, но просто хотел предоставить как можно больше, чтобы получить вашу помощь!

Спасибо! -Shalan

1 Ответ

0 голосов
/ 17 июля 2010

проблема отсортирована!: D

Я должен был понять с самого начала, но в любом случае, вот что мне пришлось изменить:

  1. изменить CSS так, чтобы элемент списка верхнего уровня получилbackground-image, а не его дочерняя гиперссылка, как у меня.
  2. измените целевой элемент в Javascript, чтобы он соответствовал тому, что я сделал в CSS.

Это делает идеальносмысл из-за иерархии элементов HTML - когда вы наводите курсор мыши на элемент списка верхнего уровня, вложенный неупорядоченный список становится видимым, позволяя пространству (использующему термин свободно), которое занимает элемент списка верхнего уровня, чтобы «развернуть», чтобы включитьего детские размеры.Поэтому, когда вы наводите курсор мыши на любые элементы в дочернем списке, родительский элемент списка по-прежнему «активен», и функция наведения работает так, как и должна.

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

ура!

...