交换div的jQuery动画问题

Question

我正在制作一个脚本，用jQuery动画切换div的位置。

我遇到的问题是，如果我想从不同的行交换2 div，这可以正常工作，但是如果第二行上还有另一个div，它将受到动画的影响。

我希望动画发生时第二行的第二个div保持原状。

如果展开代码段并将其悬停在第一行的最后一个div上，然后单击右侧的箭头，您将明白我的意思。

$(document).on("click", ".button-row .btn", function(e) {

  e.preventDefault();
  var select = $(this).closest("[class^=col-]");
  var value = $(this).attr('value');
  var section = $(this).closest(".row");
  if (select.offset().top == section.offset().top) {}
  if (value == 'weg') {
    select.remove();
  } else if (value == 'moveL') {
    var selectprev = select.prev();
    var selectnext = select.next();
    if (select.offset().top == selectprev.offset().top) {
      var left = select.width() + 30;

      select.animate({
        marginLeft: left * -2,
      }, {
        duration: 750,
        queue: false
      });
      selectprev.animate({
        marginLeft: left,
      }, {
        duration: 750,
        queue: false
      });
      setTimeout(function() {
        $("[class^=col-]").css('margin-left', '0px');
        select.clone().insertBefore(selectprev);
        selectprev.clone().insertBefore(selectprev);
        selectprev.remove();
        select.remove();
        updatebuttons();
      }, 750);
    } else {
      var left = select.width() + 30;
      var top = select.height();
      select.animate({
        marginLeft: left * 2,
        marginTop: top * -2,
      }, {
        duration: 750,
        queue: false
      });
      selectprev.animate({
        marginLeft: left * -2,
        marginTop: top * 1,
      }, {
        duration: 750,
        queue: false
      });
      setTimeout(function() {
        $("[class^=col-]").css('margin', '0px');
        select.clone().insertBefore(selectprev);
        selectprev.clone().insertBefore(selectprev);
        selectprev.remove();
        select.remove();
        updatebuttons();
      }, 750);
    }
  } else if (value == 'moveR') {
    var selectprev = select.prev();
    var selectnext = select.next();
    if (select.offset().top == selectnext.offset().top) {
      var left = select.width() + 30;
      selectnext.animate({
        marginLeft: left * -2,
      }, {
        duration: 750,
        queue: false
      });
      select.animate({
        marginLeft: left,
      }, {
        duration: 750,
        queue: false
      });
      setTimeout(function() {
        $("[class^=col-]").css('margin-left', '0px');
        select.clone().insertAfter(select.next());
        select.next().clone().insertBefore(select);
        selectnext.remove();
        select.remove();
        updatebuttons();
      }, 750);
    } else {
      var left = select.width() + 30;
      var top = select.height();
      selectnext.animate({
        marginLeft: left * 2,
        marginTop: top * -2,
      }, {
        duration: 750,
        queue: false
      });
      select.animate({
        marginLeft: left * -2,
        marginTop: top * 1,
      }, {
        duration: 750,
        queue: false
      });
      setTimeout(function() {
        $("[class^=col-]").css('margin', '0px');
        select.clone().insertAfter(select.next());
        select.next().clone().insertBefore(select);
        selectnext.remove();
        select.remove();
        updatebuttons();
      }, 750);
    }
  } else if (value == 'clone') {
    select.clone().insertAfter(select);
  }
  updatebuttons();

});

function updatebuttons() {
  $('.button-links').show();
  $('.button-rechts').show();
  $('.button-prullenbak').show();
  buttonsdisabel();
}

function buttonsdisabel() {
  $("section").each(function() {

    $(this).find("div[class^=col-]").first().find('.button-links').hide();
    $(this).find("div[class^=col-]").last().find('.button-rechts').hide();
    if ($(this).find('[class^=col-]').length == 1) {
      $(this).find("div[class^=col-]").find('.button-prullenbak').hide();
    }
    $('.button-row').fadeIn();
  });
}
$(document).on("mouseover", "section", function(e) {
  e.preventDefault();
  if ($(this).find('[class^=col-]').length >= 1 && $(this).find('.snippet-col-nav').length == 0) {
    $(this).find('[class^=col-]').each(function() {
      $(this).append('<div class="button-row snippet-col-nav btn-group" style="position:absolute;height: 56px; top:0;right:20px;">' +
        '<a class="btn btn-sm btn-primary button-links" value="moveL" title="Schuif 1 plek naar links"><i class="fa fa-arrow-left"></i></a>' +
        '<a class="btn btn-sm btn-primary button-rechts" value="moveR" title="Schuif 1 plek naar rechts"><i class="fa fa-arrow-right"></i></a>' +
        '<a class="btn btn-sm btn-inverse" value="clone" title="Clone"><i class="fa fa-clone"></i></a>' +
        '<a class="btn btn-sm btn-danger button-prullenbak" value="weg" title="Vewijder"><i class="fa fa-trash"></i></a>' +
        '</div>');
      $('.button-row').hide();
    });
  }
  updatebuttons();
});
$(document).on("mouseleave", "section", function(e) {
  $('.button-row').remove();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="afbbox-3x-v4-1" class="afbbox-3x-v4 pv-30">

  <div class="container">
    <div class="editContent">
      <h2>Kopregel</h2>
    </div>
    <div class="row">

      <div class="col-sm-4 cloneable">
        <div class="image-box style-2 mb-20 bordered dark-bg">
          <div class="iviewer_wrapper">
            <div class="iviewer">
              <img src="https://via.placeholder.com/360x270" alt="">
            </div>
          </div>
          <div class="body">
            <div class="body-inner">
              <p class="small mb-10 text-muted"><i class="icon-calendar"></i> <span class="editContent">div 1 </span> <i class="pl-10 icon-tag-1"></i> Categorie</p>
              <div class="editContent">
                <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque ipsam nihil, adipisci rem minus? Voluptatem distinctio laborum porro aspernatur.</p>
              </div>
            </div>
            <a href="#" class="btn btn-gray-transparent btn-animated btn-sm margin-clear">Lees verder<i class="fa fa-arrow-right pl-10"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-4 cloneable">
        <div class="image-box style-2 mb-20 bordered dark-bg">
          <div class="iviewer_wrapper">
            <div class="iviewer">
              <img src="https://via.placeholder.com/360x270" alt="">
            </div>
          </div>
          <div class="body">
            <div class="body-inner">
              <p class="small mb-10 text-muted"><i class="icon-calendar"></i> <span class="editContent">Jun, 2016</span> <i class="pl-10 icon-tag-1"></i> Categorie</p>
              <div class="editContent">
                <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque ipsam nihil, adipisci rem minus? Voluptatem distinctio laborum porro aspernatur.</p>
              </div>
            </div>
            <a href="#" class="btn btn-gray-transparent btn-animated btn-sm margin-clear">Lees verder<i class="fa fa-arrow-right pl-10"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-4 cloneable">
        <div class="image-box style-2 mb-20 bordered dark-bg">
          <div class="iviewer_wrapper">
            <div class="iviewer">
              <img src="https://via.placeholder.com/360x270" alt="">
            </div>
          </div>
          <div class="body">
            <div class="body-inner">
              <p class="small mb-10 text-muted"><i class="icon-calendar"></i> <span class="editContent">div 1 </span> <i class="pl-10 icon-tag-1"></i> Categorie</p>
              <div class="editContent">
                <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque ipsam nihil, adipisci rem minus? Voluptatem distinctio laborum porro aspernatur.</p>
              </div>
            </div>
            <a href="#" class="btn btn-gray-transparent btn-animated btn-sm margin-clear">Lees verder<i class="fa fa-arrow-right pl-10"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-4 cloneable">
        <div class="image-box style-2 mb-20 bordered dark-bg">
          <div class="iviewer_wrapper">
            <div class="iviewer">
              <img src="https://via.placeholder.com/360x270" alt="">
            </div>
          </div>
          <div class="body">
            <div class="body-inner">
              <p class="small mb-10 text-muted"><i class="icon-calendar"></i> <span class="editContent">Jun, 2016</span> <i class="pl-10 icon-tag-1"></i> Categorie</p>
              <div class="editContent">
                <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque ipsam nihil, adipisci rem minus? Voluptatem distinctio laborum porro aspernatur.</p>
              </div>
            </div>
            <a href="#" class="btn btn-gray-transparent btn-animated btn-sm margin-clear">Lees verder<i class="fa fa-arrow-right pl-10"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-4 cloneable">
        <div class="image-box style-2 mb-20 bordered dark-bg">
          <div class="iviewer_wrapper">
            <div class="iviewer">
              <img src="https://via.placeholder.com/360x270" alt="">
            </div>
          </div>
          <div class="body">
            <div class="body-inner">
              <p class="small mb-10 text-muted"><i class="icon-calendar"></i> <span class="editContent">Jun, 2016</span> <i class="pl-10 icon-tag-1"></i> Categorie</p>
              <div class="editContent">
                <p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque ipsam nihil, adipisci rem minus? Voluptatem distinctio laborum porro aspernatur.</p>
              </div>
            </div>
            <a href="#" class="btn btn-gray-transparent btn-animated btn-sm margin-clear">Lees verder<i class="fa fa-arrow-right pl-10"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>