Вкладки bootsrap3. Как показать анимацию, до переключения на новую вкладку?

Question

[AGGRESS0R]

Ситуация - имеем стандартные вкладки bootstrap-3.
При прокрутке страницы они прилипают к верхнему краю и всегда доступны. При переключении на другую вкладку происходит прокрутка до верха страницы, с помощью jQuery animate (чтобы контент новой вкладки читался с начала).
Но прокрутка происходит одновременно с переключением вкладки. Как сделать чтобы сначала выполнилась анимация скролинга, а лишь затем отобразилась новая вкладка?
Пробовал эксперименты с событиями вкладок (show.bs.tab, hide.bs.tab и тд.), но так ничего и не получилось.
Исходный файл изменять нельзя (bootstrap.min.js)

Заранее спасибо

Answer 1

[entermix]

После клика по вкладке сначала сделайте анимацию, а потом уже открывайте ее так:

$('#myTabs').tab('show')

getbootstrap.com/javascript/#tabs

Как то так:

$('#myTabs').click(function ()
$("div").animate({
      complete: function(){
          $('#myTabs').tab('show')
     }
    }, "slow");
})

Или так:

$('#myTabs a').click(function (e) {
  e.preventDefault() // Запрещаем выполнять действие по умолчанию
// Делаем анимацию
  $(this).tab('show') // Показываем вкладку
})

Comments

[AGGRESS0R]

Спасибо! Ваш ответ натолкнул меня на верное решение!
В проекте верстка была с использованием атрибута data-toggle="tab", у ссылки во вкладке. Вот его и надо было убрать, чтобы самостоятельно управлять отображением вкладок. Иначе стандартные скрипты бутстрапа перехватывали событие клика и я ничего не мог сделать.
А есть ли способ все таки внедрить анимацию до переключения, если оставить data-toggle="tab" ?
Зачем тогда нужны события для вкладок?

Еще раз спасибо)

[entermix]

AGGRESS0R: для этого и предназначены, возможно Вы что то неправильно делали, посмотрите еще ссылку: stackoverflow.com/questions/20705905/bootstrap-3-j...

[entermix]

AGGRESS0R: добавил еще вариант с отменой события по умолчанию