jQuery Scale和Fade同时出现
所以我可以通过它的中心枢轴很好地扩展div： http ： //jsfiddle.net/uTDay/
但是，当我在div中添加内容时，转换开始改变： http ： //jsfiddle.net/uTDay/1/
请注意，它不再从中心缩小。
我也尝试使它渐渐消失，因为它开始缩小.fadeOut() / .fadeTo() / .animate()但无法使它工作。
基本上，当你点击filter选项 – 它从中心枢轴shrink/grow的方式同时fade in/out ： http：//isotope.metafizzy时，我想要实现的效果就是这里。 CO /演示/ filtering.html
谢谢。
CSS3方法
同位素使用CSS变换来缩放元素，这就是所有内容随之缩放的原因。 如果只是更改框（容器）大小，则包含的节点不受影响（文本具有相同的字体大小等）
使用CSS转换或更改内容的大小以及容器元素（与其他答案建议一样）。
小提琴
相关代码
使用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); }
我把时间花在了这个上面：
所有框都隐藏，并根据每个元素属性缩放到它们的相对高度。
代码，使用函数变量为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);
同时淡化和缩放。 这可能会被重构一点，但这是个想法：
$(".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（添加position: relative ）：
.box { display: block; width:200px; height:200px; background-color: red; position: relative; }
演示： http ： //jsfiddle.net/uTDay/12/
盒子仍然在你想要的效果，你需要做的是对你的盒子内的img应用类似的效果
这个更好:)
$(".btn a").click(function () { $('.box').hide("scale", {}, 500).animate({'opacity' : 0}); $('.box img').hide("scale", {}, 500).animate({'opacity' : 0}); });
DEMO = http://jsfiddle.net/uTDay/8/不同的方式：
$(".btn a").click(function () { $('.box').animate({'opacity':0,'width':0,'height':0},1000); $('.box img').animate({'width':0,'height':0},1000); });