如何使用jQuery从一个div到另一个div制作div动画？

Question

这里是 My Code

var x;
var y;

$('.animateclass').each(function(index) {
  x = $(this).position().left;
  y = $(this).position().top;
});
$('.hex2').each(function(index) {
  var xi = $(this).position().left;
  var yi = $(this).position().top;
  // $(this).css('left', xi).css('top', yi);
  $(this).click(function() {
    var l = $(this).parent().next().find('.heading').position().left;
    var t = $(this).parent().next().find('.heading').position().top;

    $(this).animate({
      left: x,
      top: y,
      easing: 'easeOutQuad'
    }, 1500, function() {
      $(this).next('ul').show();
    });


  })
});

.hex2-row {
  margin: 10px;
}

.hex2 {
  float: left;
  margin-right: -26px;
  margin-bottom: -50px;
  position: relative;
}

.hex2 .left {
  float: left;
  width: 0;
  border-right: 30px solid #6C6;
  border-top: 52px solid transparent;
  border-bottom: 52px solid transparent;
  box-shadow: 0 0 20px inset rgba(0, 0, 0, .5);
}

.hex2 .middle {
  float: left;
  width: 60px;
  height: 104px;
  background: #6C6;
  display: flex;
  justify-content: center;
}

.hex2 .middle span {
  align-self: center;
  font-weight: bold;
  color: #fff;
  font-size: 27px;
}

.hex2 .right {
  float: left;
  width: 0;
  border-left: 30px solid #6C6;
  border-top: 52px solid transparent;
  border-bottom: 52px solid transparent;
  box-shadow: 0 0 20px inset rgba(0, 0, 0, .5);
}

.hex2.even {
  margin-top: -27px;
}

.hex2.odd .line {
  clear: both;
  height: 90px;
  width: 2px;
  background: #807c7c;
  margin: 0 auto;
  position: relative;
  top: 8px;
}

.hex2.odd .line:before {
  content: "";
  position: absolute;
  height: 1px;
  width: 60px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, .6);
  background: #616164;
  left: -30px;
  top: 0;
}

.hex2.odd .line::after {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #616164;
  content: "";
  bottom: 0;
  right: -2px;
}

.hex2.even .line {
  clear: both;
  height: 90px;
  width: 2px;
  background: #807c7c;
  margin: 0 auto;
  position: relative;
  top: -8px;
}

.hex2.even .line::after {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #616164;
  content: "";
  top: 0;
  right: -2px;
}

.hex2.even .line:before {
  content: "";
  position: absolute;
  height: 1px;
  width: 60px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, .6);
  background: #616164;
  left: -30px;
  bottom: 0;
}

.hex2-row .hex2:first-child .left {
  border-right-color: #9bb15e;
}

.hex2-row .hex2:first-child .right {
  border-left-color: #9bb15e;
}

.hex2-row .hex2:first-child .middle {
  background: #9bb15e;
}

.hex2-row .hex2:first-child .line::after {
  background: #9bb15e;
}

.hex2-row .hex2:first-child .text {
  color: #9bb15e;
}

.hex2-row .hex2:nth-child(2) .left {
  border-right-color: #00c3c2;
}

.hex2-row .hex2:nth-child(2) .right {
  border-left-color: #00c3c2;
}

.hex2-row .hex2:nth-child(2) .middle {
  background: #00c3c2;
}

.hex2-row .hex2:nth-child(2) .line::after {
  background: #00c3c2;
}

.hex2-row .hex2:nth-child(2) .text {
  color: #00c3c2;
}

.hex2-row .hex2:nth-child(3) .left {
  border-right-color: #5f65b6;
}

.hex2-row .hex2:nth-child(3) .right {
  border-left-color: #5f65b6;
}

.hex2-row .hex2:nth-child(3) .middle {
  background: #5f65b6;
}

.hex2-row .hex2:nth-child(3) .line::after {
  background: #5f65b6;
}

.hex2-row .hex2:nth-child(3) .text {
  color: #5f65b6;
}

.hex2-row .hex2:nth-child(4) .left {
  border-right-color: #e0575f;
}

.hex2-row .hex2:nth-child(4) .right {
  border-left-color: #e0575f;
}

.hex2-row .hex2:nth-child(4) .middle {
  background: #e0575f;
}

.hex2-row .hex2:nth-child(4) .line::after {
  background: #e0575f;
}

.hex2-row .hex2:nth-child(4) .text {
  color: #e0575f;
}

.hex2-row .hex2:nth-child(5) .left {
  border-right-color: #c14f8b;
}

.hex2-row .hex2:nth-child(5) .right {
  border-left-color: #c14f8b;
}

.hex2-row .hex2:nth-child(5) .middle {
  background: #c14f8b;
}

.hex2-row .hex2:nth-child(5) .line::after {
  background: #c14f8b;
}

.hex2-row .hex2:nth-child(5) .text {
  color: #c14f8b;
}

.hex2-row .hex2:nth-child(6) .left {
  border-right-color: #97da57;
}

.hex2-row .hex2:nth-child(6) .right {
  border-left-color: #97da57;
}

.hex2-row .hex2:nth-child(6) .middle {
  background: #97da57;
}

.hex2-row .hex2:nth-child(6) .line::after {
  background: #97da57;
}

.hex2-row .hex2:nth-child(6) .text {
  color: #97da57;
}

.hex2-row .hex2:nth-child(7) .left {
  border-right-color: #f45459;
}

.hex2-row .hex2:nth-child(7) .right {
  border-left-color: #f45459;
}

.hex2-row .hex2:nth-child(7) .middle {
  background: #f45459;
}

.hex2-row .hex2:nth-child(7) .line::after {
  background: #f45459;
}

.hex2-row .hex2:nth-child(7) .text {
  color: #f45459;
}

.hex2-row .hex2:nth-child(8) .left {
  border-right-color: #f1bc1e;
}

.hex2-row .hex2:nth-child(8) .right {
  border-left-color: #f1bc1e;
}

.hex2-row .hex2:nth-child(8) .middle {
  background: #f1bc1e;
}

.hex2-row .hex2:nth-child(8) .line::after {
  background: #f1bc1e;
}

.hex2-row .hex2:nth-child(8) .text {
  color: #f1bc1e;
}

.hex2-row .hex2:nth-child(9) .left {
  border-right-color: #117486;
}

.hex2-row .hex2:nth-child(9) .right {
  border-left-color: #117486;
}

.hex2-row .hex2:nth-child(9) .middle {
  background: #117486;
}

.hex2-row .hex2:nth-child(9) .line::after {
  background: #117486;
}

.hex2-row .hex2:nth-child(9) .text {
  color: #117486;
}

.hex2-row .hex2:nth-child(10) .left {
  border-right-color: #d84cb0;
}

.hex2-row .hex2:nth-child(10) .right {
  border-left-color: #d84cb0;
}

.hex2-row .hex2:nth-child(10) .middle {
  background: #d84cb0;
}

.hex2-row .hex2:nth-child(10) .line::after {
  background: #d84cb0;
}

.hex2-row .hex2:nth-child(10) .text {
  color: #d84cb0;
}

.hex2.odd .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: -70px;
  font-weight: bold;
}

.hex2.even .text {
  width: 100%;
  text-align: center;
  position: absolute;
  top: -70px;
  font-weight: bold;
}

.thirdview #content {
  background: #faf9f9;
}

.thirdview header {
  background-color: #257db5;
  background-image: url("../images/banner.png");
}

.animateclass {
  width: 100%;
  height: 104px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
  <div class="row">
    <div class="col-6">
      <div class="hex2-row">
        <div class="row">
          <div class="col-12">
            <div class="row">
              <div class="col-6">
                <a class="hex2 odd" href="#">
                  <div class="left"></div>
                  <div class="middle">
                    <span>A</span>
                  </div>
                  <div class="right"></div>
                </a>
                <ul style="display: none;">
                  <li>
                    <a>Lorem ipsum</a>
                  </li>
                  <li>
                    <a>Lorem ipsum</a>
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="heading">Lorem ipsum</div>
                <div class="animateclass">

                </div>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
    <div class="col-6">
      <div class="hex2-row">
        <div class="row">
          <div class="col-12">
            <div class="row">
              <div class="col-6">
                <div class="heading">Lorem ipsum</div>
                <div class="animateclass">

                </div>

              </div>
              <div class="col-6">
                <a class="hex2 odd" href="#">
                  <div class="left"></div>
                  <div class="middle">
                    <span>A</span>
                  </div>
                  <div class="right"></div>
                </a>
                <ul style="display: none;">
                  <li>
                    <a>Lorem ipsum</a>
                  </li>
                  <li>
                    <a>Lorem ipsum</a>
                  </li>
                </ul>

              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>

我想为左侧或右侧标题下的六边形制作动画，并且说明将显示在六边形的位置。在我的代码中，六边形无法正确设置动画。我想将六边形分别设置为红色部分，然后再次单击它将返回到先前的位置。请帮忙。

Answer 1

您没有在x回调的末尾重置y和click，因此第二次单击检查x和y并看到<a>已经在正确的位置。您可以在$(this).animate之后立即添加一个重置，例如：

$(this).animate( { left: x, top: y, easing: "easeOutQuad" }, 1500, function() { $(this) .next("ul") .show(); } ); x = xi; y = yi;

但是由于CSS的结构方式，当您在xi回调的顶部重置yi和click时，这些值现在会略有不同，并且{如果用户不断重复点击{1}}，它将不断漂移。我不确定您要重构该代码的精确程度如何，但是希望它能使您摆脱困境！