Блог

Для того, чтобы добавить плавный переход к addClass / removeClass, я использую пользовательский интерфейс jQuery:

 $(document).ready(function(){
    $('header nav a').hover(
        function(){
            $('header').stop().removeAttr("style").addClass('header-pink', 'slow')
        },
        function(){
            $('header').stop().removeClass('header-pink', 'slow')
        }
    )
});
  

Моя цель: изменить (с помощью анимации / эффекта затухания) цвет фона родительского элемента (заголовка) при наведении курсора на дочерний элемент (наведите указатель мыши на a). Класс css очень прост:

 .header-pink { background: pink; }
  

HTML:

 <header>
    <nav>
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
        </ul>
    </nav>
</header>
  

Конечно, я вызываю jQuery и пользовательский интерфейс jQuery без ошибок:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"</script>
<script src="js/libs/jquery.effects.core.min.js"></script>
  

Скрипт jQuery не работает должным образом, потому что:

• Класс добавлен (onmouseover), но без эффекта перехода (затухания).
• Класс добавлен нежелательным образом: <header style="background:
pink;"> я использую .removeAtrr("style") , чтобы избежать этого странного поведения.
• Класс не удаляется (onmouseout).

.animate() Я предпочитаю избегать использования для анимации цветов с помощью jQuery UI, потому что я использую переменные с МЕНЬШИМ количеством и, конечно, я хочу, чтобы стиль был изменен только таблицей стилей.

Пожалуйста, проверьте мой проект, чтобы получить представление. Как вы можете видеть, я намерен заменить цвет фона исправленного <header> на цвет ссылок при наведении курсора на ссылки. Другими словами, цвет фона <header> с анимацией / эффектом переходного затухания становится синим или розовым, как только указатель находится: наведите указатель мыши на ссылку «Сообщения». или «Ссылки». но он восстанавливает свое исходное состояние (без класса css .removeClass() ), как только указатель исчезнетс той же анимацией / эффектом переходного затухания. Пожалуйста, обратите внимание, что мой проект все еще находится в разработке, и в настоящее время я тестирую эффект с одинаковыми свойствами для всех ссылок; когда я добьюсь желаемого результата, я применю отдельные свойства (цвет фона) для каждой ссылки.