jquery - フェードアウトする他の div によって残された空のスペースを埋めるために移動するときに div をアニメーション化する方法

Question

一連の div があり、それぞれが一連のカテゴリに対応しています。フィルターをクリックすると、div のクラスが変更され、それらのカテゴリに応じて表示または非表示になります。div のフェードイン/フェードアウトの方法を制御し、ゆっくりとうまく処理しますが、div が消えるたびに、変更されていない div が突然移動して、非表示の div によって残された空のスペースを埋めます。

他のものが消えて空のスペースを残した後、非表示にならなかった div の動きを滑らかにするにはどうすればよいですか?

 //Before this goes a long function that decides wich divs will get their class changed
 $('#work-container > div[class*=visible]').fadeIn('slow','swing');
 $('#work-container > div[class*=hidden]').fadeOut('slow','swing');

編集: http://jsfiddle.net/Ccswn/3/物事のフィドル

Answer 1

animate()の代わりに使用することをお勧めしfadeOut()ます：

$('div').click(
    function() {
        $(this).animate({
            'height': 0,
            'opacity': 0
        }, 750, function() {
            $(this).remove();
        });
    });​

JS フィドルのデモ。

---

jQuery/CSS ソリューションを組み込むように編集:

の CSS を変更して.item、次の内容を含めます。

.item{
    /* other css removed for brevity */
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}

を次のように変更しa.hiddenます。

.hidden {
    width: 0; /* reset everything that might affect the size/visibility */
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}

次の jQuery を使用します。

// content animate
$('#work-container > div[class*=hidden]').addClass('hidden');
return false;

JS フィドルのデモ。

そして、すべてが思い通りに機能するようです。.addClass('visible')上記のブロックの動作を追おうとはしていませんが、そのままにしておきました。

ただし、これには CSS トランジションをサポートする (および をサポートするopacity) ブラウザーが必要なので、ユースケースでは完全ではない可能性があります。

Answer 2

使用できる方法showとhide方法：http：
//jsfiddle.net/Ccswn/5/