jQuery Scale and Fade at the same time

问题

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.

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

​

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

​

回答3:

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/

​

回答4:

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

回答5:

This one works better :)

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

回答6:

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

​ ​

来源：https://stackoverflow.com/questions/11118358/jquery-scale-and-fade-at-the-same-time