CSS3方法

Question

所以我可以通过它的中心枢轴很好地缩放div：http://jsfiddle.net/uTDay/

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

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

我也尝试过它，因为它随着.fadeOut() / .fadeTo() / .animate()开始缩小而逐渐消失，但无法让它发挥作用。

基本上，当您点击过滤器选项时，我想要实现的效果就是此效果 - shrink/grow从中心枢轴点开始的同时，fade in/out：{{ 3}}

谢谢。

Answer 1

CSS3方法

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

使用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'
    });
});

CSS（添加position: relative）：

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

DEMO：http://jsfiddle.net/uTDay/12/

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

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

jQuery Scale和Fade同时进行

6 个答案:

CSS3方法

小提琴

相关代码