使用 jQuery 删除 css答案

【问题标题】：Removing css with jQuery使用 jQuery 删除 css
【发布时间】：2013-11-24 18:23:09
【问题描述】：

我知道这在技术上不是 DOM 的一部分，但有没有人有一种通过 jquery 添加/删除 CSS3 的好方法：

#Current > span:after, .animate > span > span

所以我基本上可以执行这种操作：

$('#Current > span:after, .animate > span > span').css({
        WebkitTransition : 'move 2s linear infinite',
        MozTransition    : 'move 2s linear infinite',
        MsTransition     : 'move 2s linear infinite',
        OTransition      : 'move 2s linear infinite',
        transition       : 'move 2s linear infinite'
});

【问题讨论】：

标签： jquery

【解决方案1】：

这样的东西应该可以正常工作。例如，为什么不把你想添加的东西放到一个类中，然后做这样的事情：

$('#Current > span:after, .animate > span > span').addClass('transitionClass');

这样您可以提高代码的可读性并将样式与代码逻辑分开。如果你需要单独做 CSS，你应该参考this SO post。

【讨论】：

你能确定你的 CSS 选择器一开始就可以工作吗？例如，如果在 Chrome 控制台中执行 $('#Current > span:after, .animate > span > span') 会返回一个空数组吗？

【解决方案2】：

我同意 jtromans 的观点，但是如果你正在创建一些东西，例如一个没有css的js插件/组件，你需要直接工作而不需要任何其他文件依赖然后你可以设置这种css3属性如下，

/*add properties*/
$('div').css({
    'transform':'rotate(7deg)',
    '-ms-transform':'rotate(7deg)',
    '-webkit-transform':'rotate(7deg)',
    '-o-transform':'rotate(7deg)',
    '-moz-transition':'rotate(7deg)'
});

http://jsfiddle.net/p2w7C/

/*remove*/
$('div').css({
        'transform':'none',
        '-ms-transform':'none',
        '-webkit-transform':'none',
        '-o-transform':'none',
        '-moz-transition':'none'
    });

一个简单的函数可以是，

$(document).ready(function () {
    function transform(selector, value) {
        $(selector).css({
            'transform': value,
             '-ms-transform': value,
             '-webkit-transform': value,
             '-o-transform': value,
             '-moz-transition': value
        });
    }
    transform('div', 'rotate(7deg)');
});

http://jsfiddle.net/Hk6JE/

【讨论】：

【解决方案3】：

我认为一个好方法是使用$.toogleClass 函数，它可以让您轻松添加和删除css 类。

【讨论】：