0

次のプロパティを持つ3つのdivがあります。

div.main-box {
    width: 100px;
    height: 100px;
    display: inline-block;
    padding: 20px;
    margin: 20px;
    border: 1px solid black;
}

それらはページ上に並んでいます：

 __  __  __
|__||__||__|

ユーザーの操作に基づいて、一度に2つを削除します（たとえば、ユーザーが3つ目をクリックすると、最初の2つが消えます）。それらが削除された後、残りのボックスは中央に移動します。

今のように、ボックスは単に中央に表示されます。この動きをアニメートしたいと思います。

これが私が今持っているもののjsFiddleです：

http://jsfiddle.net/4s4v9/

私が求めていることは可能ですか？ご協力いただきありがとうございます！

アップデート：

私が求めていることは不可能のようです。他のボックスを取り外した後、残りのボックスを所定の位置に保持して、その動きをアニメートできますか？

4

2 に答える 2

1

こういう意味ですか？

$('a#change-boxes').click(function () {
    var i = 1;
    $('div.main-box').each(function () {
        if (i <= 2) {
            $(this).hide(500, function(){
            $(this).remove();
            });
        }
        i++;
    });
});

ここをチェックしてください：http：//jsfiddle.net/GmaPE/

于 2013-01-30T03:24:29.387 に答える
0

何かをアニメートするには、「left」や「margin-left」などの操作可能なプロパティが必要になります。配置せずにインラインまたはインラインブロック要素をアニメーション化できます。

代わりに相対測位を試してください。親コンテナ要素を設定します（まだ持っていない場合は追加します）。

position: relative;

すべての子要素を設定します。

position: absolute;
top: 0;
left: 0px; // 200px, 400px, etc. respectively

次に、fadeOutを実行するか、要素を非表示にします。

$('#selector-for-box-1-and-2')
.fadeOut('slow', function() {

})

次に、アニメーション完了関数にアニメーションを追加します。

$('#selector-for-box-1-and-2')
.fadeOut('slow', function() {
    $('#selector-for-box-3').animate({
        left: 0px
    }, 1000);
})

jQuery.masonryプラグインを適用 することもできます。要素を削除すると、アニメーションが自動的に処理されます。

于 2013-01-30T03:07:49.010 に答える