CODEWITHSUNDEEP
jqueryhtmlcss
BlackShawarna
BlackShawarna

Reputation: 277

Jquery animate into parent size

I'd like to animate my div children elements into my parent div element.

This is my situation: I've got 6 divs into one big div element. they've got different location inside my webpage. At the click event in one of these div i'd like that it animates and resize into the parent height and width dimensions and location.

This is my js:

$('.divChildrenClass').click(function (event) {

    //get div ID
    var currentId = $(this).attr('id');

    var extraimg = $('#' + currentId).clone();
    var of = $('#' + currentId).offset();
    extraimg.css({
        position: 'absolute', top: of.top, left: of.left, margin: '5px'
    })
        .appendTo("#divParent")
        //make bigger
       .animate({
           height: $('#second').height() + 'px',
           width: $('#second').width() + 'px'
           //top: '-' + $('#' + currentId).top() + 'px', 
           //bottom: '-' + $('#' + currentId).bottom() + 'px',
           //left: '-' + $('#' + currentId).left() + 'px',
           //right: '-' + $('#' + currentId).right() + 'px'
           //position: "absolute"
       }, 1500,
)};

I'd like to start the animation in the middle of the div parent, too.

Thanks in advance

EDIT: http://jsfiddle.net/v28qZ/ this is my situation

Upvotes: 3

Views: 876

Answers (1)

Cyril N.
Cyril N.

Reputation: 39859

Update : Based on your fiddle, here's my solution :

http://jsfiddle.net/v28qZ/2/

$('.square').click(function (event) {
    event.preventDefault();

    // Get square ID
    var currentId =     $(this).attr('id'),
        extraimg =      $('#' + currentId).clone(),
        currentOffset = $('#' + currentId).offset(),
        parent =        $('#second'),
        parentOffset =  parent.offset();

    extraimg
        .css({
            'position': 'absolute',
            'top': currentOffset.top,
            'left': currentOffset.left,
            'margin': 0
        })
        .appendTo(parent)

        //make bigger
        .animate({
            'height': parent.height(),
            'width': parent.width(),
            'top': parentOffset.top,
            'left': parentOffset.left
        }, 1500)

        .on('click', function () {
            $(this).stop(true).remove();
        });
});

And if you want it to start from the center of your parent div :

http://jsfiddle.net/v28qZ/3/

$('.square').click(function (event) {
    event.preventDefault();

    // Get square ID
    var currentId =     $(this).attr('id'),
        extraimg =      $('#' + currentId).clone(),
        parent =        $('#second'),
        parentOffset =  parent.offset();

    extraimg
        .appendTo(parent)
        .css({
            'position': 'absolute',
            'top': (parentOffset.top + (parent.height()/2)),
            'left': (parentOffset.left + (parent.width()/2)),
            'height': 0,
            'width': 0,
            'margin': 0
        })

        //make bigger
        .animate({
            'height': parent.height(),
            'width': parent.width(),
            'top': parentOffset.top,
            'left': parentOffset.left
        }, 1500)

        .on('click', function () {
            $(this).stop(true).remove();
        });
});

Some infos :

When you manipulate css properties in jQuery (in our case, .css(), .animate()), you can pass number without being strings nor adding the format used ("px"). jQuery will automatically assume it's pixels (px).

Upvotes: 4

Related Questions