jquery - 动画回到原始风格

Question

如果我有这个:

.circle {
   height: 20px;
   width: 20px;
   border-radius: 10px;
}

我可以将其放大，如下所示:

$('.circle').animate({
    'height' : 40px,
    'width' : 40px,
    'border-radius': 20px
});

但是将其缩小回原始 css 的最佳方法是什么(使用动画，因此仅剥离内联 html 样式是行不通的)？

我可以想到两种方法:

• 如果 CSS 是固定的(这不是我的情况)，那么我可以使用硬编码值将其动画化
• 如果 CSS 未固定，我可以在将每个原始属性变大之前将其存储在变量中，然后使用这些值再次将其缩小。

第二种方法的缺点是如果有多个字段，则需要大量变量和代码行。

我不是 jQuery 专家，我想我一定缺少一种更简单的方法。

Answer 1

我建议您使用CSS来设置表示层，并在jQuery中使用toggleClass通过切换类来添加和删除CSS属性。

在这种情况下，使用 jQuery toggleClass() 而不是 addClass() 和 removeClass() 可以避免使用 if else 语句来检查是否.animated 类已存在于 .circle 类中。

JS/jQuery

$('.circle').click(function(){
     $(this).toggleClass('animated');
});

CSS

.circle {
   height: 200px;
   width: 200px;
   border-radius: 100px;
   transition: all .5s ease;
   background-color:red;
}

.circle.animated {
   height: 400px;
   width: 400px;
   border-radius: 200px;
   background-color:blue;
   transition: all .5s ease;

}

我编辑了圆圈的尺寸，使其更加明显，并更改了背景颜色。如果单击它，您将看到 CSS 应用的过渡。这样您就可以保持代码整洁，并且通过编辑每个类的 CSS 属性来进行编辑会变得更加容易。

演示 http://jsfiddle.net/eNUpJ/12/

好的经验法则:

HTML 结构
用于演示的 CSS
JS(或 jQuery 作为 JS 框架)行为