Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Scale and Fade at the same time

Tags:

jquery

scale

fade

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.

like image 568
kyooriouskoala Avatar asked Jun 20 '12 11:06

kyooriouskoala


2 Answers

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

​
like image 88
Roman Avatar answered Sep 19 '22 18:09

Roman


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

like image 21
Keyo Avatar answered Sep 17 '22 18:09

Keyo