removeClass и исчезать анимации

Question

У меня есть этот код

<ul class="nav sub_nav_home"> 
    <li id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li> 
    <li id="sub_nav_home2"><a href="#"><span>LINK2</span></a></li> 
    <li id="sub_nav_home3"><a href="#"><span>LINK3</span></a></li> 
</ul> 

$("ul.sub_nav_home li").hover(function() { 
    $(this).removeClass("current").fadeOut(); 
}); 

это, кажется, не отображать анимацию я был после. Это означает, что «ли» полностью исчезает.

В основном то, что мне нужно, чтобы удалить класс «текущий» с замирание из эффекта, а затем добавить его к следующему «ли» с эффектом плавного увеличения громкости

Благодарности

Answer 1

Вы не можете исчезнуть от одного класса к другому. Вы должны указать jQuery, какие свойства оживить в методе .animate().

Чтобы получить следующий элемент li, используйте .next().

Answer 2

AFAIK Я не думаю, что вы можете добавить fadeOut() в removeClass(). Кто-то исправит меня, если я ошибаюсь!

Answer 3

не уверены, если вы можете сделать это с прямым JQuery, но я знаю, JQuery UI имеет модифицированную removeClass(), что позволяет добавить длительность, чтобы удалить класс над jQuery UI Docs

Answer 4

Да, вы могли бы сделать это с некоторые CSS3.

Вы просто добавляете следующее в .current.

.current{ 
    color: #f00; 
    background-color: #000; 
    transition: color 0.5s, background-color 0.5s; 
    -webkit-transition: color 0.5s, background-color 0.5s; /* Safari */ 
} 

Очевидно, что вам необходимо изменить цвет/фоновый цвет на атрибуты, которые вы хотите оживить. В противном случае предложение Cubed Eye включить JqueryUI отлично, так как removeClass в jQueryUI сделает все это за вас.