2

画面上にたくさんのボックスが並べられているとします。

[1] [2] [3]
[4] [5] [6]
[7] [8] [9]

div を表す各ボックス。これらの divの 1 つで jquery を使用する場合.remove()、その後にあるボックスをスライドさせるにはどうすればよいですか?

たとえば、 を削除box 5すると、の場所にスライドしたり、 の場所にスライドしたりbox 6します。 box 5box 7box 6

現在、ボックスを削除すると、ボックスは即座に目的の位置に移動します。それらにcss3遷移プロパティを試しましたが、何らかの理由で機能しませんでした。

JS:

$(this).parent().parent().parent().remove(); //this will remove the desired box

CSS:

.left-col-box {
  position: relative;
  float: left;
  width: 218px;
  height: 218px;
  margin-left: 20px;
  margin-top: 20px;

 -webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}

HTML:

<div class="left-col-box">
  <div class="left-col-box-header">
    <?php echo $rows[1]; ?>
  </div>
  <img src="includes/thumber.php?file=../img/<?php echo $rows2[0]. '.'.$rows2[1];?>&width=217&height=217" />
</div>

php 失礼します。ありがとう！基本的に HTML と CSS でボックスを作成します。そして、phpを使用してx個のボックスを生成します。どちらかを削除する場合は、目的の位置にスライドしてもらいたいです。

4

1 に答える 1

0

プラグインを使用してもよろしいですか？もしそうなら、あなたはjquery istapeでこれを簡単に行うことができます。

コンテナ要素でプラグインを有効にします。

$('.parent').isotope({
  itemSelector : '.x'
});

呼び出して、ボックスを削除するときに reLayout を実行します

$('.parent').isotope( 'reLayout');

ここでフィドル

于 2013-01-12T11:48:07.533 に答える