7

だから私はその中心のピボットからうまくスケーリングするために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

ありがとうございました。

4

6 に答える 6

12

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

​
于 2012-06-20T11:30:11.693 に答える
1

フェードとスケールを同時に行います。これは少しリファクタリングできますが、これがアイデアです。

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

于 2012-06-20T11:32:13.043 に答える
1

私はこれに時間をかけました：

すべてのボックスが非表示になり、各要素のプロパティに基づいて相対的な高さにスケーリングされます。

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>

于 2012-06-20T11:44:08.600 に答える
0

ボックスはまだ期待どおりの効果を発揮しています。必要なのは、ボックス内のimgに同様の効果を適用することです。

于 2012-06-20T11:25:01.877 に答える
0

これはうまくいきます:)

$(".btn a").click(function () {
   $('.box').hide("scale", {}, 500).animate({'opacity' : 0});
   $('.box img').hide("scale", {}, 500).animate({'opacity' : 0});
});
于 2012-06-20T11:28:23.890 に答える
0

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>

于 2012-06-20T11:33:03.767 に答える