Переходное псевдо стили в jQuery

Question

Как я могу перезаписать CSS ниже JQUERY?

(Анимации не работают, и это просто мгновенный переключатель.)

menu span ul {display: none;}
menu span:hover ul {display: block;}

$('#menu span').mouseenter(function(){
    $('#menu span ul').slideDown('fast');
}).mouseleave(function(){
    $('#menu span ul').slideUp('fast');
});

Answer 1

Один трюк для изящной оформления - не должен переопределить стили, как это:

<noscript>
  <style type="text/css">#menu span:hover ul {display: block;}</style>
</noscript>

Есть связанная таблица стилей одинаково со всеми этими стилями-non-js-пользователями.

---

Или сделать это через класс, который вы применяете к #menu что вы можете удалить, чтобы правила больше не совпадали, как это:

#menu span ul {display: none;}
#menu.noJS span:hover ul {display: block;}

И в вашем скрипте просто удалите этот класс:

$("#menu").removeClass("noJS");

---

В качестве примечания, вы можете снизить свой код, используя .hover() и .slideToggle() как это:

$('#menu span').hover(function(){
  $(this).find('ul').slideToggle('fast');
});

Answer 2

Вы не видите анимацию, потому что ваши CSS переопределяют его.

Удалять

menu span:hover ul {display: block;}

Я не хотел бы попытаться переопределить CSS для размещения браузеров, у которых нет включения JS. Номер настолько мал, что не стоит рассмотреть.