JQuery and Fade Scale at the same time

Question

So, I can make a div to scale its center well: http://jsfiddle.net/uTDay/

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

Note that it no longer contracts from the center.

I also tried to make it disappear when it started to shrink with .fadeOut() / .fadeTo() / .animate() , but couldn't get it working.

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

Thanks.

Answer 1

CSS3 approach

The isotope uses CSS Transforms to scale elements, so all content scales with it. If you simply change the size of the window (container), the nodes contained in it will not be affected (the text has the same font size, etc.).

Use CSS transforms or resize your content along with the container element (like other answers).

Fiddle

http://jsfiddle.net/UFQW9/

Corresponding 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

Attenuation and scaling at the same time. This can be reorganized 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 3

I spent my time on this:

ALL blocks are hidden and scaled to their relative height based on the properties of each element.

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

Code using the DRY function variable.

 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 4

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

Answer 5

It works better :)

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

Answer 6

DEMO = http://jsfiddle.net/uTDay/8/ in another way:

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