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.

Found this http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously but not sure how you can apply scale on animate or do not queue it — Miguel Ribeiro, Jun 20 '12 at 11:30

Roman · Accepted Answer · 2012-06-20T11:48:01.817

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

Thank you!! I've checked out the solutions from others and yours best suit my preference :) — kyooriouskoala, Jun 21 '12 at 04:03
Depending on your project, you might want to add **visibility:hidden** to the class **.box.hidden** otherwise you'll have a ghost element blocking clickable elements — user3364730, Oct 08 '15 at 00:29

Tallboy · Answer 2 · 2012-06-20T11:44:22.923

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/

score 2 · Answer 3 · answered Jun 20 '12 at 11:44

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

score 0 · Answer 4 · answered Jun 20 '12 at 11:25

0

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

answered Jun 20 '12 at 11:25

KoU_warch

2,160
1
25
46

score 0 · Answer 5 · answered Jun 20 '12 at 11:28

0

This one works better :)

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

answered Jun 20 '12 at 11:28

Subodh

2,204
18
22

score 0 · Answer 6 · answered Jun 20 '12 at 11:33

0

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

answered Jun 20 '12 at 11:33

Barlas Apaydin

7,233
11
55
86

jQuery Scale and Fade at the same time

6 Answers6

CSS3 Approach

Fiddle

Relevant code

Linked