如何在点击时将动画恢复到原来的大小和位置

how to return animation to it's original size and position on a click

本文关键字：原来 位置 恢复 动画      更新时间：2023-09-26

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

我有下面的代码来扩大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时，交叉被点击，返回到它的原始大小和定位(与高度:自动如果可行)。

也有一种方法，使它使每个div打开上面较小的?(就像左上角的div一样，我知道这是因为它的定位)

谢谢

您可以按照以下方式添加和删除类

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

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

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

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

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

我建议为smallBox, largeBox和longBox分别添加一个相同的类，这些类将被称为parentd，以识别parent div并将其动画化，并添加以下js:

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

如果我们继续漫游他的答案，我们可以使用jQuery Ui中的switchClass函数。(源)

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

示例代码: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);
相关文章：