Javascript 如何将动画返回到它'；s单击时的原始大小和位置

我对所有这些都是比较陌生的，所以如果你看到我做错了什么，或者任何简化代码的方法，请不要犹豫说

我有以下代码来放大div元素：

var profilePostsClick = function () {
    $('.largeBox, .smallBox, .longBox').click(function () {
        $(this).animate({
            width: '100%',
            height: '40%'
        }, 200);
        $('.closePost', this).removeClass('closePostHide');
    });
};
$(document).ready(profilePostsClick);

我想在点击十字时关闭每个div，将其恢复到原来的大小和位置（高度：如果可行，自动）

还有没有办法让每个div都在较小的div上面打开？（就像左上方的div一样，我知道这是因为它的定位）

---

谢谢

我认为在CSS3中使用切换和制作动画更容易

$("img").click(function(){
    $(this).toggleClass('expanded');
});

---

如果我们继续罗孚的回答，我们可以在jQuery Ui中使用

switchClass

函数。（）

通过此函数，可以切换对象的类，在这些类之间的差异中创建动画

示例代码：

JS:

---

我建议为

smallBox

、

largeBox

和

longBox

中的每一个添加一个相同的类，这些类将被称为

parentd

，以识别

父div

，并将其动画化并添加到下面的js中：

$('.closePost').on('click',function(e)
{    
        $(this).closest('.parentd')
        .animate({
                     width: '40%',
                     height: 'auto'
        },200).removeAttr('style');
        $(this).addClass('closePostHide');
        e.stopPropagation();
});

---

您可以将动画属性/值保存在缓存对象中，并在动画之后恢复它们

var animationResetCache=[]；
var saveValues=函数（节点）{
animationResetCache.push({
节点：节点，
宽度：node.css（'width'），
高度：node.css（'height'）
});
};
var restoreValues=函数（节点）{
对于（变量i=0；i

您可以通过添加和删除类来执行以下操作

JQuery:

$('.largeBox, .smallBox, .longBox').click(function (e) {
        e.preventDefault();
        $(this).addClass('increaseSize');
        $('.closePost', this).removeClass('closePostHide');
    });

$('.glyphicon-remove').click(function (e) {
        e.stopPropagation()
        $('.glyphicon-remove').parent().parent().removeClass('increaseSize');
        $('.closePost', this).addClass('closePostHide');
    });

CSS:

.increaseSize{
    width: 100%;
       height: 40%;
}

检查

$('.closePost').on('click',function(e)
{    
        $(this).closest('.parentd')
        .animate({
                     width: '40%',
                     height: 'auto'
        },200).removeAttr('style');
        $(this).addClass('closePostHide');
        e.stopPropagation();
});

var animationResetCache = [];

var saveValues = function (node) {
    animationResetCache.push({
        node: node,
        width: node.css('width'),
        height: node.css('height')
    });
};

var restoreValues = function (node) {
    for (var i = 0; i < animationResetCache.length; ++i) {
        var item = animationResetCache[i];
        if (item.node.is(node)) {
            return item;
        }
    }
};


var profilePostsClick = function () {
    $('.largeBox, .smallBox, .longBox').click(function (e) {
        var $this = $(this);

        if ($this.hasClass('open')) return;

        saveValues($this);

        $this.addClass('open').animate({
            width: '100%',
            height: '40%'
        }, 200);

        $this.find('.closePost').removeClass('closePostHide');
    });


    $('.closePost').click(function () {
        var $parent = $(this).parent('.largeBox, .smallBox, .longBox');

        if ($parent.hasClass('open')) {
            var cachedValues = restoreValues($parent);

            $parent.animate({
                width: cachedValues.width,
                height: cachedValues.height
            }, function () {
                $parent.removeClass('open');
            });

            $parent.find('.closePost').addClass('closePostHide');
        }
    });

};
$(document).ready(profilePostsClick);

$('.largeBox, .smallBox, .longBox').click(function (e) {
        e.preventDefault();
        $(this).addClass('increaseSize');
        $('.closePost', this).removeClass('closePostHide');
    });

$('.glyphicon-remove').click(function (e) {
        e.stopPropagation()
        $('.glyphicon-remove').parent().parent().removeClass('increaseSize');
        $('.closePost', this).addClass('closePostHide');
    });

.increaseSize{
    width: 100%;
       height: 40%;
}