jQuery - активный значок анимированного меню

Question

jQuery - активный значок анимированного меню

0

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

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

Скрипт: http://jsfiddle.net/WgszM/

$(".desktop-menu li").hover(function(){
  $("ul li.active").removeClass('active');  
  $(this).stop().addClass('active');
})

Paul Redmond 15 дек. 2013, в 18:31

Источник

Теги:

javascript

jquery

3 ответа

0

Вы должны добавить этот стиль в свой css, тогда это только ANIMATE

header .desktop-menu .nav nav ul{
    position:absolute;
}
header .desktop-menu .nav nav ul li{
  position:relative;
}

ramchauhan 15 дек. 2013, в 16:07

0

Лучше всего заменить атрибут left на атрибут marginLeft. Вы увидите разницу и соответственно установите pad/margin.

Получайте удовольствие от этого.

Vaibhav Mistry 15 дек. 2013, в 14:10

Ещё вопросы

Mircea Sandu · Accepted Answer · 2013-12-15T15-53-00.000Z

Ну, чтобы добиться желаемого эффекта, то есть: точка, перемещающаяся к другому элементу, вам нужно будет создать дополнительный элемент, который переместится туда, где вы наведете.

Поэтому я предлагаю сделать что-то вроде этого:

$('ul li').hover( function() {
    var acl = $(this).offset();
    var aw = $(this).width();
    var ll = acl.left + parseInt( aw / 2 );
    var tt = acl.top - 8;
    $('#active').animate({
            left : ll + 'px',
            top : tt + 'px' 
        });
});

Вот полный пример: http://jsfiddle.net/ec9cm/

Это то, чего вы хотите достичь?

У меня все еще есть проблема с неправильным отображением позиции при загрузке страницы. Активный элемент div расположен точно слева от активного элемента списка, а не на половине его ширины. Когда я наведите курсор мыши, это исправлено. Кроме того, вы знаете, как изменить продолжительность анимации?
У меня была опечатка в моем коде. Теперь это работает отлично. Моя обновленная скрипка: jsfiddle.net/WgszM/9 Большое спасибо!