用动画切换类答案

【问题标题】：Toggle class with animation用动画切换类
【发布时间】：2013-08-10 14:29:12
【问题描述】：

我想要这样的东西：

$('#fo').toggleClass('tra', 'slow');

我知道我可以使用 jQuery UI 来实现这一点，但我正在寻找更快更小的解决方案，因为我不想在我的网站中集成另外 20-90 kb

【问题讨论】：

ToggleClass animate jQuery? 的可能重复项
@putvande 这不是重复的，OP 说他确实不想使用 jQuery

标签： jquery toggleclass

【解决方案1】：

请改用.animate()。您需要为要更改的各个样式设置动画。例如。 .animate( { height: "500px", width: "200px" }, 2000 ) 在 2 秒内将高度和宽度更改为这些值。 jQuery UI 允许您从类更改中派生动画，而纯 jQuery 不能。

【讨论】：

【解决方案2】：

如果没有 JQuery UI，您可能需要在正确的时间触发 CSS3 过渡/动画（请参阅 http://www.netmagazine.com/tutorials/getting-animations-trigger-right-time）或只需 .animate 使用 JQuery。

【讨论】：

【解决方案3】：

你可以做一些事情like this（但它不是最干净的）：

function animateClass(el, klass) {
    var endCSS = el.toggleClass(klass).css();
    var startCSS = el.toggleClass(klass).css();
    for ( var p in endCSS ) {
        if ( startCSS[p] === endCSS[p] ) {
            delete endCSS[p];
        }
    }
    el.animate(endCSS, 'slow', function() {
        el.toggleClass(klass).removeAttr('style');
    });
};

它还假设您不会添加任何其他内联样式。虽然我猜你可以用这样的东西替换动画回调：

for ( var p in endCSS ) {
    endCSS[p] = '';
}
el.toggleClass(klass).css(endCSS);

它还使用了一个插件，扩展了 $.fn.css 的使用，以返回来自 How can I get list of all element css attributes with jQuery? 的所有 CSS

简答

CSS 过渡。

【讨论】：

【解决方案4】：

指定动画名称作为第三个参数。

$('#fo').toggleClass('big-blue', 'slow', "easeOutSine");

【讨论】：

该问题专门询问如何做到这一点不使用jQueryUI，但是这个答案中使用的参数是jQueryUI独有的。