Клиринговый CSS анимации с JQuery

Question

Good Day

У меня есть следующие CSS Animation:

.ca-menu li:hover .ca-main{ 
    color: #000; 
    -webkit-animation: moveFromLeftRotate 300ms ease; 
    -moz-animation: moveFromLeftRotate 300ms ease; 
    -ms-animation: moveFromLeftRotate 300ms ease; 
} 

Теперь на конкретной странице, я хотел бы добавить следующее JQuery, чтобы предотвратить анимацию на конкретном страница ...

var pathname = window.location.pathname; 

if(pathname == '/ik/1084-2/'){ 
    $('.ca-menu li:hover .ca-main').css({ 
     '-webkit-animation': 'none', 
     '-moz-animation': 'none', 
     '-ms-animation': 'none'}); 
} 

но он не работает - он по-прежнему показывает анимацию.

Любые идеи?

UPDATE

Решение:

CSS:

.noAnimation{ 
    -webkit-animation: none !important; 
    -moz-animation: none !important; 
    -ms-animation: none !important; 
} 

JS:

$('.ca-menu .ca-main').addClass('noAnimation'); 

Спасибо всем за ваши входы

Answer 1

то, что вам нужно сделать, это абстрагировать анимацию на отдельный класс, а затем использовать jquery для удаления/добавления класса к элементам по мере необходимости

ex.

CSS:

.some-animation { 
    -webkit-animation: moveFromLeftRotate 300ms ease; 
    -moz-animation: moveFromLeftRotate 300ms ease; 
    -ms-animation: moveFromLeftRotate 300ms ease; 
} 

Javascript:

if (condition) { 
    jQuery('#myelement').removeClass('some-animation'); 
} 

Answer 2

CSS анимация происходит на основе некоторых CSS селекторов, как класс, идентификатор и т.д., используя JQuery, вы можете удалить селектор CSS, в которой анимация определены. Я чувствую, что вы удаляете анимацию.

Cheers!

Answer 3

Вы можете отлаживать что-то вроде этого, используя приведенные ниже пункты

1. Проверьте FireBug для ошибки JS на конкретной странице.

2. if (pathname == '/ ik/1084-2 /') { alert ('hi'); // проверить, правильно ли ваш, если условие }

3. оповещения (путь к файлу) и увидеть значение переменной и посмотреть, является ли это правильно

4. Убедитесь, что эта структура $ (»ча-меню ли:. Зависать .ca-main ') существует на конкретной странице