如何使用jQuery从一个Div到另一个Div动画

Question

这是我的代码

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>

我想在左侧或右侧标题下进行动画六角形，并且描述将显示在六角形的位置。在我的代码中，Hexagon无法正确动画。我想分别将六角形动画为红色部分，然后单击它，它将返回上一个位置。请帮助。

Answer 1

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

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

但是，由于您的CSS结构化的方式，当您在click回调的顶部重置xi和yi时，这些值现在会稍有不同，并且您的<a>将不断移动，如果用户可以重复单击，则这些值将不断移动它。我不确定您要如何重构该代码，但希望这会使您脱颖而出！