Javascript 使元件适合它'；全父母

我正在创建一个高级管理面板，我正在扮演编辑项目的角色，我喜欢当我点击编辑一个项目时，他会填充其父项的整个空间，但是我不知道如何使用动画使元素返回其原始位置，知道如何做吗？到目前为止，我试过：

这是一支钢笔：

HTML

Javascript

$("#container").on("click", ".edit", function(e){
    e.preventDefault();

    var el = $(this);
    var elParent = el.closest(".single-item");

    var curElTop = elParent.position().top;
    var curElLeft = elParent.position().left;

    elParent.toggleClass("active", function(){
        elParent.css({
            position: "absolute",
            top: curElTop,
            left: curElLeft
        }).animate({
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        });
    });

});

---

CSS3过渡将帮助您创建全屏宽度和高度的平滑动画

但如果出于某种原因，您仍然希望在jQuery中执行此操作，那么以下是解决方案：

第二次单击“编辑”按钮时，您只需说：

$("<element_reference>").removeAttr("style");

$（“”）。删除属性（“样式”）；

它将删除以前应用的样式，将元素恢复到其正常视图

或者您也可以将位置从“绝对”更改为“静态”，两者都将给出相同的结果。用于使用jQuery设置位置动画

---

希望有帮助。

我发现做这类事情最简单的方法是：

在项目上放置CSS转换属性

创建一个新类，在单击该项时将其添加到该项中，以使其全屏显示。当物品关闭时，请停止上课

---

CSS转换往往更快、更平滑。

使用CSS3制作动画，而不是使用javascript，这样你就可以开始了

$("#container").on("click", ".edit", function(e){
    e.preventDefault();

    var el = $(this);
    var elParent = el.closest(".single-item");

    var curElTop = elParent.position().top;
    var curElLeft = elParent.position().left;

    elParent.toggleClass("active", function(){
        elParent.css({
            position: "absolute",
            top: curElTop,
            left: curElLeft
        }).animate({
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        });
    });

});

$("<element_reference>").removeAttr("style");