Переопределение псевдо стилей в 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>

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