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: ht

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

​

Answer 2

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

​

Answer 3

the box is still doing the effect you expect, what you need to do is apply a similar effect to the img inside your box

Answer 4

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/

​

Answer 5

DEMO= http://jsfiddle.net/uTDay/8/ different way:

$(".btn a").click(function () {
    $('.box').animate({'opacity':0,'width':0,'height':0},1000);
    $('.box img').animate({'width':0,'height':0},1000);
});

​ ​

Answer 6

This one works better :)

$(".btn a").click(function () {
   $('.box').hide("scale", {}, 500).animate({'opacity' : 0});
   $('.box img').hide("scale", {}, 500).animate({'opacity' : 0});
});