jQuery 缩放和淡入淡出同时进行

Question

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

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

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

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

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

谢谢。

Answer 1

CSS3 方法

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

使用 CSS 转换或将内容的大小与容器元素一起更改（如其他答案所示）。

小提琴

http://jsfiddle.net/UFQW9/

相关代码

爪哇语

$(".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

我花了很多时间在这一点上：

所有框都隐藏，并根据每个元素属性缩放到其相对高度。

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

​

Answer 3

同时淡

入淡出和缩放。这可以稍微重构一下，但这是这个想法：

$(".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/

​

Answer 4

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

Answer 5

这个:)效果更好

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

Answer 6

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

​