Javascript 无法将div动画设置到所需位置两次

我有8个div，可以根据相应下拉列表中给出的值进行交换，如下图所示：

但是，正如您在本文中所看到的，动画并没有两次为同一个div工作。比如说，如果我用div 4替换div 1，然后我尝试用div 7替换新的div 1，那么该div在整个页面上的动画效果都很奇怪！尝试用firebug调试它，所有的动画值都是正确的，流程也很完美。还是它造成了这个问题。不知道我是否遗漏了

animate（）

方法！！这是我的HTML代码：

<table cellspacing="30">
  <tr>
    <td>
        <div id="img1" style="width:100px;height:40px;position:relative;">
            <select id="drop1" name="" class="drop">
                <option>1</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner1">
        </div>
    </td>
    <td>
        <div id="img2" style="width:100px;height:40px;position:relative;">
            <select id="drop2" name="" class="drop">
                <option>2</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner2">
        </div>
    </td>
    <td>
        <div id="img3" style="width:100px;height:40px;position:relative;">
            <select id="drop3" name="" class="drop">
                <option>3</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner3">
        </div>
    </td>
    <td>
        <div id="img4" style="width:100px;height:40px;position:relative;">
            <select id="drop4" name="" class="drop">
                <option>4</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner4">
        </div>
    </td>
  </tr>
  <tr>
    <td>
        <div id="img5" style="width:100px;height:40px;position:relative;">
            <select id="drop5" name="" class="drop">
                <option>5</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner5">
        </div>
    </td>
    <td>
        <div id="img6" style="width:100px;height:40px;position:relative;">
            <select id="drop6" name="" class="drop">
                <option>6</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner6">
        </div>
    </td>
    <td>
        <div id="img7" style="width:100px;height:40px;position:relative;">
            <select id="drop7" name="" class="drop">
                <option>7</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner7">
        </div>
    </td>
    <td>
        <div id="img8" style="width:100px;height:40px;position:relative;">
            <select id="drop8" name="" class="drop">
                <option>8</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner8">
        </div>
    </td>
  </tr>
</table>

1.
1.
2.
3.
4.
5.
6.
7.
8.
2.
1.
2.
3.
4.
5.
6.
7.
8.
3.
1.
2.
3.
4.
5.
6.
7.
8.
4.
1.
2.
3.
4.
5.
6.
7.
8.
5.
1.
2.
3.
4.
5.
6.
7.
8.
6.
1.
2.
3.
4.
5.
6.
7.
8.
7.
1.
2.
3.
4.
5.
6.
7.
8.
8.
1.
2.
3.
4.
5.
6.
7.
8.

脚本：

  $(".drop").change(function () {
  var flag = false;

  for (var i = 1; i <= 8; i++) {
      var dropdown = document.getElementById('drop' + i);

      if (flag == true && source.value != i) {
          dropdown.value = i;
      }
      if (dropdown.value != 0 && dropdown.value != i && flag == false) {
          var a = i;
          var b = dropdown.value;
          var pos = i;
          var source_div = document.getElementById('img' + i);
          var source = dropdown;
          var destination = document.getElementById('drop' + dropdown.value);
          var destination_div = document.getElementById('img' + dropdown.value);
          var posDrop = Math.ceil(dropdown.value / 4);
          var posI = Math.ceil(i / 4);

          var modDrop = (dropdown.value % 4);
          var modI = (i % 4);
          if (modDrop == 0) modDrop = 4;
          if (modI == 0) modI = 4;
          if (modDrop > modI) {
              // move right
              var diff = modDrop - modI;
              $("#img" + i).animate({
                  left: +((diff) * 130) + "px"
              });
              $("#img" + dropdown.value).animate({
                  right: +((diff) * 130) + "px"
              });
          } else if (modDrop < modI) {
              // move left
              var diff = modI - modDrop;
              $("#img" + i).animate({
                  right: +((diff) * 130) + "px"
              });
              $("#img" + dropdown.value).animate({
                  left: +((diff) * 130) + "px"
              });
          }

          if (posDrop > posI) {
              //move down
              $("#img" + i).animate({
                  top: +(70) + "px"
              });
              $("#img" + dropdown.value).animate({
                  bottom: +(70) + "px"
              });
          } else if (posDrop < posI) {
              // move up
              $("#img" + i).animate({
                  bottom: +(70) + "px"
              });
              $("#img" + dropdown.value).animate({
                  top: +(70) + "px"
              });
          }
          flag = true;

      }
  }
  destination.value = pos;

  var temp_div = source_div.id;
  source_div.id = destination_div.id;
  destination_div.id = temp_div;

  var temp = source.id;
  source.id = destination.id;
  destination.id = temp;
});

$（“.drop”）.change（函数（）{
var标志=假；
对于（var i=1；i modI）{
//右移
var diff=modDrop-modI；
$（“#img”+i）。设置动画({
左：+（（差异）*130）+“像素”
});
$（“#img”+dropdown.value）。设置动画({
右：+（（差异）*130）+“像素”
});
}否则如果（modDropposI）{
//下移
$（“#img”+i）。设置动画({
顶部：+（70）+“px”
});
$（“#img”+dropdown.value）。设置动画({
底部：+（70）+“px”
});
}else if（posDrop

我可以建议您使用完全不同的方法吗？与其直接设置div的动画，不如使用数组存储有关哪个div在哪里的信息，然后在每次重新排序时重新渲染页面的这一部分

假设你有这样一个数组：

[0,1,2,3,4,5,6,7]

然后在div“y”上按下值“x”，将数组[y-1]存储在z中，将数组[y-1]设置为x-1，然后将数组[x-1]设置为z

现在，您已经以稳定的方式在阵列中切换了它们

然后重新渲染表

如果愿意，还可以使用数据arVal属性将数组值添加到div中。这可能是一些不错的动画的基础

像这样在数组中循环

jQuery.each(array, function(i, arVal){
     //and set the values of the data attribute
     $('td:nth-child(' + i + ') div)'.attr('data-arVal', '' + arVal + '' );
});

数据属性是您的朋友。jQuery-each循环比for循环更方便、更强大，我强烈建议您使用jQuery.each循环

p、 这里可能有一些打字错误，没有测试我写的东西。

我创建的。它可能并不完美，但代码更简单。我还从表中删除了

div

，并将其绝对定位

$(".drop").change(function () {

    var $thisElem = $(this).parent();

    var swapIndex = $(this).children(":selected").val();
    var $swapElem = $("#img" + swapIndex);

    var thisPosition = $thisElem.position();
    var swapPosition = $swapElem.position();

    $thisElem.finish()
        .animate({left: swapPosition.left})
        .animate({top: swapPosition.top});

    $swapElem.finish()
        .animate({left: thisPosition.left})
        .animate({top: thisPosition.top});

    $swapElem.attr("id", $thisElem.attr("id"));
    $thisElem.attr("id", "img" + swapIndex);

});

一些问题：

• 如果位于相同的

  左侧

  位置，则会有一个延迟，因为它会将每个项目设置为相同的

  左侧

  位置。这可以用if语句来修复
• 您可能需要将每个选项设置为其对应的位置。这是很容易做到的，如果你想做的话，请发表评论

---

也许有一种更简单的方法可以做到这一点。介意我重新编码吗？请继续。任何解决问题的方法都是有帮助的！他们必须在一张桌子里吗？@AdarshHegde供参考，在jsfiddle中有一个很好的选项叫Tidy Up…但是有人能告诉我发布的代码有什么问题吗。只是