Как настроить таргетинг на элемент навигации текущей страницы и исчезнуть его текущий класс css с помощью jQuery?

У меня есть простая панель навигации. Как и следовало ожидать, ссылка, соответствующая текущей странице, имеет простой класс CSS под названием «текущий». Все ссылки имеют хороший эффект перехода при наведении со свойством «легкость входа-выхода» длительностью 0,3 секунды. Проблема в том, что когда пользователь щелкает другую ссылку на панели навигации, он не увидит эффекта облегчения, потому что страница переключится мгновенно. Я знаю, что могу отложить переключение страницы через jQuery с помощью функции setTimeout(), но я не совсем понимаю, как настроить таргетинг на «текущий» класс в элементе ссылки и указать браузеру медленно исчезать «текущий» CSS класс перед переходом на следующую страницу.

Есть ли в этом смысл? Текущий HTML:

<nav>
<ul>
<li><a href="#" class="current">About</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

Супер простая навигация с текущей страницей, имеющей класс CSS класса hover, который определяется после основных стилей ссылок как:

nav ul li a, nav ul li a:link, nav ul li a:visited{
    font-family: Arial, Verdana, sans-serif;
    text-decoration: none;
    color: rgba(0,0,0,1);
    font-size: 2.4em;
    padding: 5px 10px;
    margin: 0px 15px;
   -webkit-text-shadow: 1px 1px 1px rgba(255,255,255,1);
   -moz-text-shadow: 1px 1px 1px rgba(255,255,255,1);
   text-shadow: 1px 1px 1px rgba(255,255,255,1);
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

nav ul li a:hover, nav ul li a:active, nav ul li a.current{
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,1);
    text-decoration: none;
    -moz-border-radius: 140px;
    -webkit-border-radius: 140px;
    border-radius: 140px;
    -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    -moz-text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

В любом случае я использую jQuery для чего-то еще на сайте, поэтому ответ jQuery вполне приемлем. Надеюсь, я достаточно ясно выразил свою проблему. По сути, я не хочу резкого переключения страницы для пользователя, когда он нажимает на другую навигационную ссылку. Я хочу, чтобы «текущий» класс CSS исчезал на 0,3 секунды, прежде чем браузер перейдет на новую страницу. Я знаю, что те же стили применяются к «текущему» классу CSS и состоянию наведения ссылки, я могу изменить это, если это необходимо для работы кода.

Заранее спасибо всем, кто поможет. Любые советы/предложения/подсказки приветствуются.


jquery css hover nav fade
person Akhilesh D    schedule 31.12.2012    source источник
comment
Я бы рекомендовал не делать этого. Не делайте свой сайт менее отзывчивым, чем нужно, только для того, чтобы показывать анимацию. Разве вы не можете просто сделать анимацию при наведении?   -  person Chris Herbert    schedule 31.12.2012
comment
@Chris: Да, я мог бы, но это для сайта-портфолио, и это довольно вычурно; резкий переход страницы серьезно нарушает работу пользователя, потому что некоторые другие элементы на странице остаются статичными, а другие исчезают. Я действительно не думаю, что задержка в 0,3 секунды сделает его менее отзывчивым.   -  person Akhilesh D    schedule 31.12.2012

Ответы (1)


arrow_upward
0
arrow_downward

Вы не можете исчезнуть из класса как такового. Вы можете создать переход CSS3, который запускается добавлением или удалением класса и создаст желаемую анимацию, затухание или что-то еще.

Так, например, вы можете установить переход CSS3 для свойства opacity. Класс .current в вашем CSS может указывать opacity: 1, а условие CSS по умолчанию (когда нет класса .current) может быть для opacity: 0;. Затем, когда вы удалите класс current из объекта, элемент постепенно исчезнет до 0 непрозрачности.

Или у вас может быть класс fadeOut с правилом CSS opacity: 0, и с переходом CSS для opacity, установленным на объекте, вы просто добавляете класс fadeOut к объекту.

Похоже, вы уже знаете, что если щелчок по ссылке приведет к изменению страницы, вам придется отложить обработку ссылки href с помощью setTimeout(), чтобы иметь возможность увидеть плавный переход и, возможно, предотвратить обработку по умолчанию. ссылки.

person jfriend00    schedule 31.12.2012