Bootstrap/JQuery: Скольжение «активное» состояние в навигационной панели

Question

В Bootstrap 3 навигационной панели, вы можете пометить элемент как активный:

С JQuery я могу создать простую функцию «переключить» активное состояние от одного к другому элементу при щелчке.

$('li').click(function() { 
    if (! $(this).hasClass('active')) { 
     $('li.active').removeClass('active'); 
     $(this).addClass('active'); 
     // Do more stuff here 
    } 
}); 

Полный пример: http://jsfiddle.net/zEh3h/2/

Теперь то, что я хотел бы достичь, это «слайд» эффект темно-серого фона от одного элемента к другому по щелчку. Он также должен работать в чувствительном вертикальном режиме.

Есть ли способ начальной загрузки для этого? Или, может быть, обходное решение jQuery? Я не мог найти ничего об этом в документах.

Answer 1

Может быть что-то вроде этого:

$('li').click(function() { 
    if (! $(this).hasClass('active')) { 
     $('li.active').removeClass('active'); 
     $(this).addClass('active'); 
     offsetTop = $(this).offset().top - $('.nav').offset().top; 
     offsetLeft = $(this).offset().left - $('.nav').offset().left; 
     $('.nav-background').animate({ 
      top: offsetTop, 
      left: offsetLeft, 
      right: $('.nav').width() - $(this).width() - offsetLeft, 
      bottom: $('.nav').height() - $(this).height() - offsetTop 
     }, 'slow', 'linear'); 
    } 
}); 

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

jsFiddle: Example