jQuery Scale and Fade at the same time

Question

So I can make a div to scale nicely from it's center pivot: http://jsfiddle.net/uTDay/

However, the transition starts to change when I add in content inside the div: http://jsfiddle.net/uTDay/1/

Notice that it no longer shrink from center.

I also tried to make it so that it fades out as it starts to shrink with .fadeOut() / .fadeTo() / .animate() but couldn't get it to work.

Basically, what I'd like to achieve is this effect here when you click on the filter options - the way it shrink/grow from its center pivot and at the same time, fade in/out: http://isotope.metafizzy.co/demos/filtering.html

Thank you.

Solution 1

CSS3 Approach

Isotope uses CSS Transforms to scale the elements, that's why all content scales with it. If you simply change the box (container) size, the contained nodes aren't affected (text has same font-size, etc.)

Use CSS transforms or change the size of your content together with the container element (like the other answers suggest).

Fiddle

http://jsfiddle.net/UFQW9/

Relevant code

Javascript

$(".btn a").click(function () {
    $('.box').addClass('hidden');
});

CSS

.box {
    display: block;
    height: auto;
    width:402px;
    /*height:200px;*/
    background-color: red;
    padding: 20px;

     -webkit-transition: all 1000ms linear;
    -moz-transition: all 1000ms linear;
    -ms-transition: all 1000ms linear;
    -o-transition: all 1000ms linear;
    transition: all 1000ms linear;
}
.box.hidden {
    -moz-opacity: 0;
    opacity: 0;
    -moz-transform: scale(0.01);
    -webkit-transform: scale(0.01);
    -o-transform: scale(0.01);
    -ms-transform: scale(0.01);
    transform: scale(0.01);
}

​

Solution 2

Fade and scale at same time. This could be refactored a bit but this is the idea:

$(".btn a").click(function () {
    var boxleft = $('.box').outerWidth()/2;
    var boxtop  = $('.box').outerHeight()/2;
    var imgleft = $('.box img').outerWidth()/2;
    var imgtop  = $('.box img').outerHeight()/2;
    $('.box').animate({
        'opacity' : 0,
        'width': 0, 
        'height': 0,
        'left': boxleft + 'px',
        'top': boxtop + 'px'
    });
    $('.box img').animate({
        'opacity' : 0,
        'width': 0, 
        'height': 0,
        'left': imgleft + 'px',
        'top': imgtop + 'px'
    });
});

​

CSS (added position: relative):

.box {
    display: block;
    width:200px;
    height:200px;
    background-color: red;
    position: relative;
}

DEMO: http://jsfiddle.net/uTDay/12/

​

Solution 3

I have taken my time on this one:

ALL boxes hide, and scale to their relative heights based on each elements properties.

http://jsfiddle.net/uTDay/11/

Code, using a function variable to be DRY.

var hide_those_boxes = function () {
    $('.box , .box img').each(function(ix, obj) {
            $(obj).animate({
                opacity : 0, 
                left: '+='+$(obj).width()/4, 
                top: '+='+$(obj).height()/4,
                height:0, 
                width:0
            }, 
            3000, 
            function() { $(obj).hide(); }
        );
    });
}


$(".btn a").click(hide_those_boxes);

​