jquery - 用动画切换类

Question

我想要这样的东西：

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

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

Answer 1

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

Answer 2

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

Answer 3

你可以做这样的事情（但它不是最干净的）：

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);

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

简答

CSS 过渡。

Answer 4

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

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