使用动画切换类

Question

我希望有这样一个东西：

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

我知道可以通过 jQuery UI 实现这一点，但我正在寻找更快、更小的解决方案，因为我不想在我的网站上集成另外 20-90kb 的文件。

- Code

---

可能是ToggleClass animate jQuery？的重复问题。 - putvande

@putvande 这不是重复的问题，OP说他不想使用jQuery。 - Vincent van der Weele

Answer 1

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

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

- Hemanth

---

这个问题特别要求_不使用jQueryUI_来完成，但是这个答案中使用的参数是专属于jQueryUI的。 - AJPerez

Answer 2

你可以做类似于 这样的 操作（但不够简洁）：

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的使用，以返回如何使用jQuery获取所有元素CSS属性的列表？中的所有CSS。

简短回答

CSS过渡。

- kalley

Answer 3

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

- Hamza Kubba

Answer 4

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

- Babatunde