无法将div设置为两次所需位置的动画

时间：2014-10-12 09:55:14

标签： javascript jquery animation

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

enter image description here

然而，动画不适用于同一个div两次，正如您在jsfiddle中看到的那样。假设我将div 1与div 4交换，然后我尝试用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>

脚本：

  $(".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;
});

2 个答案:

答案 0 :(得分：1)

我可以建议您使用完全不同的方法吗？而不是直接为div设置动画，使用数组存储有关哪个div所在的信息，然后在每次重新排序时重新呈现页面的这一部分。

所以说你有一个像这样的数组：

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

然后在div'y'上推送值'x'导致在z中存储数组[y-1]，将数组[y-1]设置为x-1，然后将数组[x-1]设置为z。

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

然后重新渲染表格。

如果您愿意，也可以使用data-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每个循环都更方便，更强大，然后循环，我强烈建议你使用jQuery.each循环。

P.S。可能是这里的一些拼写错误，没有测试我写的内容。

答案 1 :(得分：1)

我创建了http://jsfiddle.net/qa03f7g1/27/。它可能不完美但代码更简单。我还从表格中移除了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);

});

一些问题：

  • 如果位于同一left位置，则会有延迟，因为它会将每个项目设置为相同的left位置。这可以通过if语句修复。
  • 您可能希望将每个选项设置为相应的位置。这很容易做到，如果你想完成，请发表评论。
相关问题
最新问题