jQuery Scale和Fade同时出现

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

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

请注意,它不再从中心缩小.

我也尝试使它渐渐消失,因为它开始缩小.fadeOut()/ .fadeto()/ .animate()但无法使它工作.

基本上,当你点击过滤器选项 – 它从中心枢轴收缩/增长的方式同时淡入/淡出时,我想要达到的效果就是这里的效果：http://isotope.metafizzy.co/demos/filtering.html

谢谢.

解决方法

CSS3方法

同位素使用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);
}

​

原文地址：https://www.jb51.cc/jquery/177596.html