jQuery Scale和Fade同时 [英] jQuery Scale and Fade at the same time

问题描述

因此，我可以使div从其中心枢轴很好地缩放: http://jsfiddle.net/uTDay/

So I can make a div to scale nicely from it's center pivot: http://jsfiddle.net/uTDay/

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

However, the transition starts to change when I add in content inside the div: http://jsfiddle.net/uTDay/1/

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

Notice that it no longer shrink from center.

我还尝试制作它，使其随着.fadeOut()/.fadeTo()/.animate()的收缩而逐渐消失，但无法正常工作.

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.

基本上，我要实现的效果是单击过滤器选项时的效果-从中心枢轴shrink/grow并同时fade in/out的方式:

Basically, what I'd like to achieve is this effect here when you click on the filter options - the way it shrink/grow from its center pivot and at the same time, fade in/out: http://isotope.metafizzy.co/demos/filtering.html

谢谢.

推荐答案

CSS3方法

Isotope使用CSS变换来缩放元素，这就是所有内容都随之缩放的原因.如果仅更改框(容器)的大小，则所包含的节点不会受到影响(文本具有相同的字体大小等)

CSS3 Approach

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

使用CSS变换或与容器元素一起更改内容的大小(如其他答案所示).

Use CSS transforms or change the size of your content together with the container element (like the other answers suggest).

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

​

这篇关于jQuery Scale和Fade同时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！