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 アニメーションは、class、id などの CSS セレクターに基づいて発生します。jQuery を使用すると、アニメーションが定義されている CSS セレクターを削除できます。アニメーションを削除してよかったと思います。

乾杯！

于 2013-04-03T05:09:17.343 に答える
0

以下の手順を使用して、このようなものをデバッグできます

  1. 特定のページで FireBug for JS エラーを確認します。

  2. if(パス名 == '/ik/1084-2/'){ alert('hi'); // if 条件が正しいかどうかを確認します }

  3. alert(pathname) 変数の値を見て、それが正しいかどうかを確認します

  4. この構造 $('.ca-menu li:hover .ca-main') が特定のページに存在することを確認してください

于 2013-04-03T05:17:06.697 に答える