javascript - 在网格元素上切换动画并淡入/淡出其他元素

Question

我正在为我的网站试验一种类似磁贴的布局，用户可以与之交互。每个框都是一个用于选择产品的按钮，选择产品后，其他框会淡出并隐藏。此效果可切换。

我稍微修改了以下 fiddle我在网上找到的，它非常接近预期的结果。

$('.box').click(function() {
  $('.box').not(this).fadeToggle(250);
});

div.box {
  width: 100px;
  height: 63px;
  background-color: #52c6ec;
  margin: 5px;
  padding-top: 37px;
  float: left;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>

我唯一想做的就是让所选元素过渡(通过动画)到左上角，而不是仅仅出现在那里。最好也在其他盒子的褪色期间。

因为我在这里使用的是 float ，所以我不知道如何为它们设置动画，因为它们没有任何数字属性。

关于 jQuery 解决方案的想法？谢谢。

Answer 1

这是你想要的吗？

var t, l, loctop, locleft;

$('.box').click(function() {
  
  var e = $(this);
  
  if( $('.box').not(this).is(':visible') )
  {
    t = e.position().top + 'px';
    l = e.position().left + 'px';
    loctop = locleft = 0;
    $(this).css( {position: 'fixed', top:t, left:l} );
    $('.box').not(this).fadeToggle(550, function(){
      $(e).animate({ 
          top: loctop,
          left: locleft
        }, 800, function(){
        $(this).stop(true, true);
      });
    });
  }
  else
  {
    loctop = parseInt(t);
    locleft = parseInt(l);
    $(e).animate({ 
          top: loctop,
          left: locleft
        }, 800, function(){
      $('.box').not(this).fadeIn(550, function(){
        $(e).css( {position: 'relative', top:'', left:''} );
      });
    });
  }
  
});

div.box {
  width: 100px;
  height: 63px;
  background-color: #52c6ec;
  margin: 5px;
  padding-top: 37px;
  float: left;
  text-align: center;
  color: #fff;
  font-weight: bold;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>