1

再会

我有以下 CSS 动画：

.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'});
}

但它不起作用 - 它仍然显示动画。

有任何想法吗？

更新

解决方案：

CSS：

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

JS：

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

谢谢大家的投入

4

3 回答 3

4

您应该做的是将动画抽象为一个单独的类，然后根据需要使用 jquery 将该类删除/添加到元素中

前任。

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');
}
于 2013-04-03T05:06:11.767 回答
3

CSS 动画基于一些 css 选择器（如 class、id 等）发生。使用 jQuery，您可以删除定义动画的 css 选择器。我觉得你很好地删除了动画。

干杯!

于 2013-04-03T05:09:17.343 回答
0

您可以使用以下步骤调试类似的东西

  1. 检查特定页面上的 FireBug for JS 错误。

  2. if(pathname == '/ik/1084-2/'){ alert('hi'); // 检查你的 if 条件是否正确 }

  3. alert(pathname) 并查看变量值是否正确

  4. 确保此结构 $('.ca-menu li:hover .ca-main') 存在于特定页面中

于 2013-04-03T05:17:06.697 回答