Question

我对这一切都比较新，所以如果你看到我做错了什么，或者无论如何简化任何代码，请不要犹豫。

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

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

https://jsfiddle.net/jvkhmpbt/

我希望在单击十字架时关闭每个div，将其返回到原始大小和位置（如果可行，使用高度：auto）。

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

由于

Answer 1

您可以通过添加和删除类

来执行以下操作

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%;
}

检查Fiddle Here.

Answer 2

我认为使用切换更容易并在CSS3中执行动画

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

Answer 3

如果我们继续使用Rover的答案，我们可以在jQuery Ui中使用switchClass函数。（source）

这个函数让你切换一个对象的类，在这些类之间的差异中创建一个动画。

示例代码：jsFiddle

<div class="large"></div>

CSS：

.large{
   width: 100%;
   height: 200px;
   background-color: red;
}

.small {
   width: 10%;
   height: 50px;
   background-color:green;
}

JS：

$("div").switchClass("large","small",500);

Answer 4

我建议为smallBox，largeBox和longBox中的每一个添加一个相同的类，这些类将被称为parentd以识别parent div和动画它回来并添加到js下面：

<强> DEMO

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

Answer 5

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

http://jsfiddle.net/jvkhmpbt/4/

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);

如何在单击时将动画返回到原始大小和位置

5 个答案: