Question

我希望有这样的东西：

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

你可以做一些事情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 个答案:

简答