0

ユーザーがクリックすると非表示（display：none）になる可能性のある一連のフローティングDIVがあります。1つが非表示になると、他のDIVはその場所を埋めるために「ジャンプ」します（それらもフローティングであるため）。

ただし、新しい位置にスムーズに「スライド」してほしい。これを行うための最良の方法は何ですか？以下にサンプルページを含めました。エディターにダンプすると、追加しようとしている機能（アニメーション）を除いて完全に機能します。

function hideBox(num) {
  document.getElementById('box' + num).style.display = 'none';
}
body {
  padding: 25px;
  margin: 0px;
  font-family: Helvetica;
  color: #333;
  font-size: 18px;
}

div.box {
  width: 100px;
  height: 63px;
  background-color: #52c6ec;
  margin: 5px;
  padding-top: 37px;
  float: left;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
<div class="box" id="box1" onclick="hideBox(1)">Box 1</div>
<div class="box" id="box2" onclick="hideBox(2)">Box 2</div>
<div class="box" id="box3" onclick="hideBox(3)">Box 3</div>
<div class="box" id="box4" onclick="hideBox(4)">Box 4</div>
<div class="box" id="box5" onclick="hideBox(5)">Box 5</div>
<div class="box" id="box6" onclick="hideBox(6)">Box 6</div>
<div class="box" id="box7" onclick="hideBox(7)">Box 7</div>
<div class="box" id="box8" onclick="hideBox(8)">Box 8</div>
<div class="box" id="box9" onclick="hideBox(9)">Box 9</div>
<div class="box" id="box10" onclick="hideBox(10)">Box 10</div>
<div class="box" id="box11" onclick="hideBox(11)">Box 11</div>
<div class="box" id="box12" onclick="hideBox(12)">Box 12</div>
<div class="box" id="box13" onclick="hideBox(13)">Box 13</div>
<div class="box" id="box14" onclick="hideBox(14)">Box 14</div>
<div class="box" id="box15" onclick="hideBox(15)">Box 15</div>
<div class="box" id="box16" onclick="hideBox(16)">Box 16</div>
<div class="box" id="box17" onclick="hideBox(17)">Box 17</div>
<div class="box" id="box18" onclick="hideBox(18)">Box 18</div>
<div class="box" id="box19" onclick="hideBox(19)">Box 19</div>
<div class="box" id="box20" onclick="hideBox(20)">Box 20</div>
<div class="box" id="box21" onclick="hideBox(21)">Box 21</div>
<div class="box" id="box22" onclick="hideBox(22)">Box 22</div>
<div class="box" id="box23" onclick="hideBox(23)">Box 23</div>
<div class="box" id="box24" onclick="hideBox(24)">Box 24</div>
<div class="box" id="box25" onclick="hideBox(25)">Box 25</div>
<div class="box" id="box26" onclick="hideBox(26)">Box 26</div>
<div class="box" id="box27" onclick="hideBox(27)">Box 27</div>
<div class="box" id="box28" onclick="hideBox(28)">Box 28</div>
<div class="box" id="box29" onclick="hideBox(29)">Box 29</div>
<div class="box" id="box30" onclick="hideBox(30)">Box 30</div>

4

3 に答える 3

4

ボックスが実際に行の変更をアニメーション化する、よりアニメーション化されたバージョンの場合、これも実行されます：http: //jsfiddle.net/rCgxD/1/。これは、堅牢なライブラリとアニメーションにもjQueryを使用しています。以下は私が使用したjavascriptコードです：

$(function(){
    $('.box').click(function(){
       var boxpositions = [];
        $('.box').not(this).each(function(index,elem){
           boxpositions[index] = [$(elem).position().top,$(elem).position().left];
        });
        var thisposition = [$(this).position().top,$(this).position().left];
       $(this).hide();
        var newpositions = [];
        $('.box').not(this).each(function(index,elem){
           newpositions[index] = [$(elem).position().top,$(elem).position().left];
        });
        $(this).show().css({position:'absolute',top:thisposition[0],left:thisposition[1]}).hide(200);
        $('.box').not(this).each(function(tindex,telem){
            $(telem).css({position:'absolute',top:boxpositions[tindex][0],left:boxpositions[tindex][1]}).animate({top:newpositions[tindex][0],left:newpositions[tindex][1]},200,function(){$(this).css({position:'static',top:'auto',left:'auto'});});;
        });
    });
});
于 2013-03-24T22:53:26.240 に答える
2

タグにあるようjQueryに、あなたができる最も簡単なことは.hide（）を使うことです

onclickこれらすべてのハンドラーをHTMLコードに追加する必要はありません。単に次を使用してください。

$('.box').click(function(){
 $(this).hide(200); //change width,height and opacity to 0 in 200miliseconds
});

デモ。

ただし、ライブラリを使用しないソリューションが必要な場合は、次のようにすばやく再帰的に解決できます。

function hideBox(num, perc) {
    if(perc == undefined)
        perc = 100;

    if(perc-- > 0)
        setTimeout(function(){
            document.getElementById('box'+num).style.width = perc + 'px'; 
            hideBox(num,perc);
        }, 1);
    else
        document.getElementById('box'+num).style.display = 'none'; 
}

デモ

于 2013-03-24T22:40:41.033 に答える
0

バニラJavascriptを使用すると、これは困難（かつ広範囲）になりますが、タグ付けしたjQueryを使用すると、次のように簡単になります。

$(".box").click(function()
{
   $(this).hide(400);
});

ここで、400は、アニメーションが実行されるミリ秒数です。

于 2013-03-24T22:47:16.853 に答える