javascript - 如何使用 CSS 滑动/增长一个 tile 以定位 90x90px

Question

我想让 grid[row1][col1] 滑动到 grid[row2][col2] 然后让它以 90x90px 增长

任何想法如何做到这一点？

样式:

<style type="text/css">
      #grid {
        background-color: #ccc0b3;
        width: 400px;
        height: 400px;
        position: relative;
        border-radius: 5px;
      }

      .box {
        width: 80px;
        height: 80px;
        border-radius: 5px;
        font-family: Arial, sans-serif;
        font-size: 35px;
        font-weight: bold;
        display: inline-block;
        position: absolute;
        padding: 5px;
        margin: 5px;
        text-align: center;
        line-height: 80px;
      }
    </style>

JavaScript:创建名为 box

的类

function makeNew(row, col) {
      var number = Math.random() < 0.9 ? 2 : 4;
      var color = pikColor(number);
      var textcolor = textColor(number);

      return grid[row][col] = $('<div>')
        .css({
          background: color,
          color: "blue",
          top  : row * 100 + 'px',
          left : col * 100 + 'px'
        })
        .text(number)
        .addClass('box')
        .appendTo($('#grid'));
    }

将 grid[row2][col2] 更新为 grid[row1][col1]:

function merge(row1, col1, row2, col2) {
      if (merging[row2][col2]) {
        return false;
      }

      grid[row2][col2].remove();
      grid[row2][col2] = grid[row1][col1];
      grid[row1][col1] = null;
      var number = grid[row2][col2].text() * 2 ;
      var color = pikColor(number);
      var textcolor = textColor(number);
      alert(number);
      alert(textcolor);
      merging[row2][col2] = true;

      grid[row2][col2]
        .css({
          background: color,
          color: textcolor,
          top  : row2 * 100 + 'px',
          left : col2 * 100 + 'px'
        })
        .text(number);

      return true;
    }

谢谢

Answer 1

我会使用 Jquery .animate 函数，像这样:

grid[row1][col1].animate({ top: row2 * 100, left: col2 * 100, width: 90, height: 90 },
    { duration: 1000 })