6

問題: CSS トランジションを使用して、別の div が非表示になっていることによって作成された空いたスペースに div が移動する方法を制御できますか?

ユーザーが設定した間隔に基づいて表示および非表示 (表示: なし) の要素がアプリに含まれています。display:none で予想されるように、隣接する要素が によって空いたスペースを占めるように移動することがあります。

この場合の動きは気にしません。動きをコントロールしたい。私が望むのは、cssトランジションまたはその他の方法を介して移動することであり、所定の位置に移動するだけではありません。これは可能ですか？

ボタンクリックによるシナリオを示す JS フィドルを次に示します。#red が隠されているとき、#blue がよりゆっくりと位置に移動するのを見たいです。どうも。

http://jsfiddle.net/uV6W7/1/

jsfiddle のコードは次のとおりです。

HTML

<div id="red"></div>
<div id="blue"></div>
<p>
<button id="remove" type="button">Remove Red</button>

CSS

#red {
    display: inline-block;
    background-color: red;
    height: 200px;
    width: 200px;
}
#blue {
    display: inline-block;
    background-color: blue;
    height: 200px;
    width: 200px;
}

Javascript

$("#remove").on("click", function(event){
    if($('#remove').text()=="Remove Red") {
      $('#red').fadeOut();
      $('#remove').html("Restore Red");
    }else {
      $('#red').fadeIn();
      $('#remove').html("Remove Red");
    }
});
4

1 に答える 1

4

赤を幅 0 の状態にスライドさせると、赤を隠すことができます。これにより、右の要素が左の場所に滑り込んだように見えます。

$('#red').animate({width:'toggle'});左にスライドして使用できます。

#red別の div をラップしてから、フェード#redしてからコンテナーをスライドさせて、視覚効果を組み合わせることもできます。

于 2013-07-03T18:36:33.640 に答える