Эффект анимации addClass / removeClass с пользовательским интерфейсом jQuery - PullRequest
Новая
       46

Эффект анимации addClass / removeClass с пользовательским интерфейсом jQuery

1 голос
/ 16 октября 2011

Чтобы добавить плавный переход в 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 UI без ошибок: 

<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 - это нечтоЯ предпочитаю избегать, потому что я использую переменные с LESS и, конечно, я хочу, чтобы стиль изменялся только таблицей стилей.

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

...