Анимация табов как реализовать.

(Ответов: 6, Просмотров: 429)
  1. Опытный Аватар для Neumann1970
    • Регистрация: 29.01.2016
    • Сообщений: 299
    • Репутация: 4
    Всем привет!
    Такой вопрос есть панель табов при переходе с одного на другой сейчас действие происходит мгновенно. Мне нужно что бы при нажатии область активного отображения равномерно затухало в цвет фона, на новом равномерно появлялось.
    Как это сделать? Подскажите пожалуйста если что-то подобное делали или какой-то похожий ваш вариант.
    Спасибо!

    https://codepen.io/wizly/pen/BlKxo/
    • 0
  2. Опытный Аватар для Vlad03
    • Регистрация: 21.05.2014
    • Сообщений: 404
    • Репутация: 33
    • Webmoney BL: ?
    jquery и css3 использовать.
    • 0
  3. Опытный Аватар для Neumann1970
    • Регистрация: 29.01.2016
    • Сообщений: 299
    • Репутация: 4
    а как этот эффект называется?
    • 0
  4. Опытный Аватар для Vlad03
    • Регистрация: 21.05.2014
    • Сообщений: 404
    • Репутация: 33
    • Webmoney BL: ?
    Здесь пример посмотрите.
    • 0
  5. Новичок
    • Регистрация: 17.01.2017
    • Сообщений: 5
    • Репутация: 0
    Neumann1970,
    если говорить о CSS то можно применить transition и указать время перехода и скорость
    если речь о jquery то это fadein и fadeout с указанием времени в м/с
    • 0
  6. Опытный Аватар для Neumann1970
    • Регистрация: 29.01.2016
    • Сообщений: 299
    • Репутация: 4
    Спасибо! разобрался в бутстрапе это называется "fade" эффект - просто добавляется классом в блок tab-content.
    Благодарю за ответы.
    • 1

    Спасибо сказали:

    Mohavk(03.03.2017),
  7. Новичок
    • Регистрация: 15.07.2015
    • Сообщений: 15
    • Репутация: 6
    • Webmoney BL: ?
    Очень быстрый и удобный скрипт таб вкладок

    <ul>
    <li class="tab-item">First</li>
    <li class="tab-item">Second</li>
    </ul>

    <div class="tab-content">
    <div class="tab-content_item"></div>
    <div class="tab-content_item"></div>
    </div>


    $(".tab-content_item").not(":first").hide();
    $(".tab-item").click(function() {
    $(".tab-item").removeClass("active-tab").eq($(this).index()).addClass("active-tab");
    $(".tab-content_item").hide().eq($(this).index()).fadeIn()
    });
    • 1

    Спасибо сказали:

    Mohavk(07.03.2017),

Похожие темы

Темы Раздел Ответов Последний пост
Главная страница и анимация
WordPress 0 13.01.2017 19:04
CSS3 анимация
Web программирование 0 06.11.2014 01:10
Анимация для загружаемых изображений
Web программирование 1 14.06.2014 15:34
Анимация Loading при открытия тумба
DLE 2 08.07.2013 11:18
Нужны статьи по нескольким тематикам + баннеры анимация
Копирайтинг, переводы, постинг 3 06.05.2011 16:09

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры