如何使用jQuery从一个div到另一个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> 

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

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> ，您的<a>将会不断漂移。 。 我不确定您要重构该代码的精确程度如何，但是希望这能使您满意！