CODEWITHSUNDEEP
javascriptjqueryhtmlcss
tcpic94
tcpic94

Reputation: 37

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

I am relatively new to all this so if you see anything I am doing wrong, or anyways to simplify any code please do not hesitate to say.

I have the following code to enlarge the div element:

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/

I am wanting to close each div when the cross is clicked, returning it to it's original size and positioning (with height: auto if feasible).

Aslo is there a way to make it so each div opens above the smaller ones? (like the top left div does, i am aware this is because of it's positioning)

Thanks

Upvotes: 2

Views: 346

Answers (5)

ketan
ketan

Reputation: 19341

You can do like following way by adding and removing class

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

Check Fiddle Here.

Upvotes: 1

yckart
yckart

Reputation: 33398

You could save the animation properties/values in an cache-object and restore them after your animation.

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

Upvotes: 0

Jordumus
Jordumus

Reputation: 2783

If we continue on Rover his answer, we can use the switchClass function in jQuery Ui. (source)

This function let's you switch the classes of an object, creating an animation in the difference between those classes.

Example code: 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);

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

I would suggest to add one more identical class to each of smallBox,largeBox and longBox which will be called parentd to identify parent div and animate it back and add below js:

DEMO

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

Upvotes: 0

Rover
Rover

Reputation: 407

I think it's easier to use a toggle and do the animation in CSS3

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

Upvotes: 0

Related Questions