Как оживить div от одного div к другому, используя jquery? - PullRequest
Новая
       15

Как оживить div от одного div к другому, используя jquery?

0 голосов
/ 19 декабря 2018

Вот Мой код 

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>

Я хочу анимировать шестиугольник под заголовком слева или справа, и описание отобразится на позиции шестиугольника.В моем коде шестиугольник не анимируется должным образом.Я хочу анимировать шестиугольник в красном разделе соответственно, и еще один щелчок по нему, он вернется на прежнее место.Пожалуйста, помогите.

1 Ответ

0 голосов
/ 19 декабря 2018

Вы не сбрасываете 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 эти значения теперь будут немного отличаться, и ваш <a> будет постоянно дрейфовать, если пользователь будет постоянно нажимать на него.Я не уверен, как именно вы захотите провести рефакторинг этого кода, но, надеюсь, это вас раскусит!

...