jQuery 同时缩放和淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11118358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Scale and Fade at the same time
提问by kyooriouskoala
So I can make a div to scale nicely from it's center pivot: http://jsfiddle.net/uTDay/
所以我可以制作一个 div 从它的中心支点很好地缩放：http: //jsfiddle.net/uTDay/
However, the transition starts to change when I add in content inside the div: http://jsfiddle.net/uTDay/1/
但是，当我在 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.
我还试图让它随着.fadeOut()/ .fadeTo()/开始缩小而逐渐消失，.animate()但无法让它工作。
Basically, what I'd like to achieve is this effect here when you click on the filter options - the way it shrink/growfrom its center pivot and at the same time, fade in/out: http://isotope.metafizzy.co/demos/filtering.html
基本上，当您单击过滤器选项时，我想在这里实现这种效果 - 它shrink/grow从其中心支点开始的方式，同时，fade in/out：http: //isotope.metafizzy.co/demos/filtering.html
Thank you.
谢谢你。
回答by Roman
CSS3 Approach
CSS3 方法
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.)
Isotope 使用 CSS Transforms 来缩放元素，这就是所有内容都随它缩放的原因。如果您只是更改框（容器）大小，则包含的节点不受影响（文本具有相同的字体大小等）
Use CSS transforms or change the size of your content together with the container element (like the other answers suggest).
与容器元素一起使用 CSS 转换或更改内容的大小（就像其他答案建议的那样）。
Fiddle
小提琴
Relevant code
相关代码
Javascript
Javascript
$(".btn a").click(function () {
$('.box').addClass('hidden');
});
CSS
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);
}
?
回答by Tallboy
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):
CSS（添加position: relative）：
.box {
display: block;
width:200px;
height:200px;
background-color: red;
position: relative;
}
DEMO: http://jsfiddle.net/uTDay/12/
演示：http: //jsfiddle.net/uTDay/12/
?
?
回答by Keyo
I have taken my time on this one:
我花了我的时间在这个：
ALLboxes hide, and scale to their relative heights based on each elements properties.
所有框都隐藏，并根据每个元素的属性缩放到它们的相对高度。
Code, using a function variable to be DRY.
代码，使用一个函数变量来进行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);
?
?
回答by Barlas Apaydin
DEMO= http://jsfiddle.net/uTDay/8/different way:
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);
});
? ?
? ?
回答by KoU_warch
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
盒子还在做你期望的效果，你需要做的是对盒子里面的 img 应用类似的效果
回答by Subodh
This one works better :)
这个效果更好:)
$(".btn a").click(function () {
$('.box').hide("scale", {}, 500).animate({'opacity' : 0});
$('.box img').hide("scale", {}, 500).animate({'opacity' : 0});
});
