jquery - jQuery同时缩放和淡入淡出

Question

所以我可以制作一个 div 从它的中心枢轴很好地缩放：http: //jsfiddle.net/uTDay/

但是，当我在 div 中添加内容时，过渡开始发生变化：http: //jsfiddle.net/uTDay/1/

请注意，它不再从中心收缩。

我还尝试让它随着.fadeOut()/ .fadeTo()/开始收缩而淡出，.animate()但无法让它工作。

基本上，当您单击过滤器选项时，我想在此处实现这种效果-它shrink/grow从中心枢轴同时开始的方式：http fade in/out: //isotope.metafizzy.co/demos/filtering.html

谢谢你。

Answer 1

CSS3 方法

Isotope 使用 CSS 变换来缩放元素，这就是为什么所有内容都随之缩放的原因。如果您只是更改框（容器）大小，则包含的节点不受影响（文本具有相同的字体大小等）

使用 CSS 转换或更改内容的大小以及容器元素（如其他答案所建议的那样）。

小提琴

http://jsfiddle.net/UFQW9/

相关代码

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

​

Answer 2

同时淡化和缩放。这可以重构一下，但这就是想法：

$(".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'
    });
});

​</p>

CSS（添加position: relative）：

.box {
    display: block;
    width:200px;
    height:200px;
    background-color: red;
    position: relative;
}

演示：http: //jsfiddle.net/uTDay/12/

​</p>

Answer 3

我花时间在这个上：

所有的盒子都隐藏起来，并根据每个元素的属性缩放到它们的相对高度。

http://jsfiddle.net/uTDay/11/

代码，使用函数变量进行 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);

​</p>

Answer 4

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

​ ​</p>

Answer 5

这个效果更好:)

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

Answer 6

盒子仍然在做你期望的效果，你需要做的是对你盒子里的 img 应用类似的效果