Плавный переход между вкладками на jQuery

Kane 06.02.2013 вкладки, jQuery, плавный переход Все вопросы » jQuery 6807

вопрос

http://dimox.name/universal-jquery-tabs-script/
Использую этот скрипт вкладок сделанных на jQuery. Вкладки обычно разного размера, к примеру если текста мало высота 100px если много то 500px. Хотелось бы что бы при переключении вкладок был плавный переход по вертикали, то есть при переходе с меньшей вкладки (100px) плавно скользя в низ она увеличилась до 500px (размер большей вкладки). И наоборот, при переходе с большей вкладке на меньшую, низ плавно скользил в верх. Надеюсь понятно обьяснил:)
К сожалению еще не обладаю знаниями по jQuery, по этому прошу помочь.
Скрипт вкладок

Показать / Скрыть текст

(function($) {
$(function() {

  $('ul.tabs').delegate('li:not(.current)', 'click', function() {
    $(this).addClass('current').siblings().removeClass('current')
      .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
  })

})
})(jQuery)

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

Ответа пока нет

6 комментариев

Юзер

324

TheImDim - 2015-03-256 февраля 2013 19:47 - #11430

Присвоить переменной высоту элемента, затем при переходе использовать анимацию animate.

Юзер

iwanowi4 - 2015-03-257 февраля 2013 08:01 - #11449

(function($){$(function(){$('ul.tabs').delegate('li:not(.current)','click',function(){$(this).addClass('current').siblings().removeClass('current').parents('div.section').find('div.box').eq($(this).index()).fadeIn(1500).siblings('div.box').hide(1500);})})})(jQuery)

Пробовали вот так?

Юзер

105

Kane - 2015-03-257 февраля 2013 15:24 - #11455

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

Юзер

iwanowi4 - 2015-03-257 февраля 2013 21:17 - #11461

Цитата: Kane

очень стремно

Тогда Вам нужно заменить скрипт табов... dimox изобрёл велосипед, и сам этого не скрывает...

Юзер

105

Kane - 2015-03-258 февраля 2013 00:47 - #11463

Они все одинаковые, исполнение немного разное и все, одни более лаганые другие менее... В общем спасибо и на этом

Юзер

iwanowi4 - 2015-03-258 февраля 2013 16:47 - #11475

Цитата: Kane

Они все одинаковые...

это далеко не так, есть табы с кучей настроек и эффектов (только нужны ли они?). Этот максимально урезан и не требует подгрузки дополнительных скриптов... Насчёт лагов, так и многие другие скрипты часто лагают и не уживаются вместе, хотя на демо работают отлично. Вот ещё один вариант, вполне себе "плавно скользя"...

(function($){$(function(){$('ul.tabs').on('click','li:not(.current)',function(){$(this).addClass('current').siblings().removeClass('current').parents('div.section').find('div.box').eq($(this).index()).show(1500).siblings('div.box').hide(1500);})})})(jQuery)

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

non-stop | Как решить проблему индексации DLE в пои ... ¹

non-stop
Как решить проблему индексации DLE в поиске Bing?
19-12-2024, 17:02

Забыл написать что обновился до последней версии 17.3
Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
lutskboy | Как максимально грамотно организовать до ... ¹

lutskboy
Как максимально грамотно организовать добавление материалов через SQL-запросы?
18-12-2024, 21:39

все верно. related_ids автоматом заполняется потом.
derebas | Убираем xfsearch из адресной строки ⁷

derebas
Убираем xfsearch из адресной строки
16-12-2024, 02:35

в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
toxicpioner | Убираем xfsearch из адресной строки ⁷

toxicpioner
Убираем xfsearch из адресной строки
15-12-2024, 19:31

если в доп поле есть пробел, будет выдавать просто 403 стр
dj-avtosh | Воспользовался хаком удаление html из ад ... ²

dj-avtosh
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
12-12-2024, 17:26

Нужно правило с year поднять выше всех в .htaccess
TeraMoune | Воспользовался хаком удаление html из ад ... ²

TeraMoune
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
11-12-2024, 22:12

У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
toxicpioner | Как упорядочить ID новостей ¹⁹

toxicpioner
Как упорядочить ID новостей
9-12-2024, 22:24

***Комментарий удален***
DnCnv | Как показать только одну категорию, к ко ... ¹

DnCnv
Как показать только одну категорию, к которой принадлежит новость?
9-12-2024, 01:46

***Комментарий удален***
web102 | Почему не отображается картинка в галере ... ³

web102
Почему не отображается картинка в галерее?
4-12-2024, 11:49

дайте адрес сайта. можно в личку
Shandi | Почему не отображается картинка в галере ... ³

Shandi
Почему не отображается картинка в галерее?
3-12-2024, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?