Jquery 将动画设置回原始样式

如果我有这个：

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

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

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

但是，什么是最好的方法，然后缩小它回到它的原始css（使用动画，所以仅仅剥离内联html样式将不起作用）

我可以想出两种方法：

• 如果css是固定的（在我的例子中不是），那么我可以使用硬编码的值将其动画化
• 如果css不是固定的，我可以在将每个原始属性变大之前将其存储在一个变量中，然后使用这些值将其再次缩小

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

---

我不是jQuery方面的专家，我想我错过了一个更简单的方法。

直接在之后进行转换

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

---

将您的转换直接放在后面

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

---

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

在这种情况下，使用jQuery

toggleClass（）

而不是

addClass（）

和

removeClass（）

可以避免使用if-else语句来检查类

是否已存在于
类中

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属性，可以更轻松地进行编辑

演示



好的经验法则：

HTML用于结构

CSS用于演示

JS（或jQuery作为JS框架）对于行为
我建议您在jQuery中使用CSS设置表示层和toggleClass，通过切换类来添加和删除CSS属性。


在这种情况下，使用jQuery
toggleClass（）
而不是
addClass（）
和
removeClass（）
可以避免使用if-else语句来检查类
是否已存在于
类中

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属性，可以更轻松地进行编辑

演示



好的经验法则：

HTML用于结构

CSS用于演示

JS（或jQuery作为JS框架）对于行为
尝试

$(function () {
    $(".circle").animate({
        "height": "40px",
         "width": "40px",
         "border-radius": "20px"
    }, {
        duration: 2500,
        done: function (promise) {
            var back = {};
            $.each(promise.props, function (key, value) {
                back[key] = String(Number(value.replace("px", "") / 2) + "px");
            });
            return $(this).animate(back, promise.duration);
        }
    });
});

JSFIDLE

看
试试看

$(function () {
    $(".circle").animate({
        "height": "40px",
         "width": "40px",
         "border-radius": "20px"
    }, {
        duration: 2500,
        done: function (promise) {
            var back = {};
            $.each(promise.props, function (key, value) {
                back[key] = String(Number(value.replace("px", "") / 2) + "px");
            });
            return $(this).animate(back, promise.duration);
        }
    });
});

JSFIDLE

看
避免使用jQuery编辑CSS属性。添加和删除应用了CSS属性的类更方便：）避免使用jQuery编辑CSS属性。添加和删除应用了CSS属性的类更方便：）是的，我知道，旧浏览器当然不支持CSS转换。说得好。这也是事实，因为大多数浏览器的css转换都支持多个版本。单击此链接上的所有浏览器版本：@iStimple如果你使用旧浏览器，你就不值得拥有好东西。@bjb568我同意你的观点，我知道你的意思，但如果你正在从事大多数商业项目，例如电子商务等，不幸的是，当你看到IE8甚至是非常旧版本的移动android本机浏览器的要求时，你开始哭泣：我知道，旧浏览器当然不支持css转换。说得好。这也是事实，因为大多数浏览器的css转换都支持多个版本。单击此链接上的所有浏览器版本：@iStimple如果你使用旧浏览器，你就不值得拥有好东西。@bjb568我同意你的观点，我知道你的意思，但如果你正在从事大多数商业项目，例如电子商务等，不幸的是，当你看到这些要求时，当你阅读IE8甚至是非常旧版本的移动android本机浏览器时，你开始哭泣：D