Как с анимацией движения поменять местами два блока?

Question

Надо сделать так
А у меня получается так (CodePen)

let isSwitched = false;
$('.switchers:last-child').on('click', function() {
  if (!isSwitched) {
    $('.switchers:first-child').animate({
      left: 'none',
      right: '5px'
    }, 500);
    $('.switchers:last-child').animate({
      right: 'none',
      left: '5px'
    }, 500);
    isSwitched = false;
  }
  else if (isSwitched) {
        $('.switchers:first-child').animate({
      right: 'none',
      left: '5px'
    }, 500);
    $('.switchers:last-child').animate({
      left: 'none',
      right: '5px'
    }, 500);
    isSwitched = true;
  }
  
});

* {margin: 0;padding: 0;}
main {
  background-color: #121212;
  width: 100vw;
  height: 100vh;
}
.switcher {
  position: absolute;
  width: 150px;
  height: 25px;
  border: 1px solid #fff;
  right: 45vw;
  top: 45vh;
}
.switchers {
  width: 60px;
  height: 15px;
  border: 1px solid #fff;
  position: absolute;
  top: 4px;
  cursor: pointer;
}
.switchers:first-child {
  left: 5px;
  background-color: #fbfbfb;
}
.switchers:last-child {right: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="switcher">
    <div class="switchers"></div>
    <div class="switchers"></div>
  </div>
</main>

Как видите, правый блок идет влево, но левому блоку вообще все по левому и он стоит на месте, не могу понять почему, как сделать чтобы эти два блока менялись местами с анимацией движения?

Answer 1

Нужно анимировать соответственные свойства - left значит left, а не менять его на right.

let isSwitched = false;
$('.switchers:last-child').on('click', function() {
  if (!isSwitched) {
    $('.switchers:first-child').animate({
      left: '84px',
    }, 500);
    $('.switchers:last-child').animate({
      right: '84px',
    }, 500);
    isSwitched = true;
  }
  else if (isSwitched) {
    $('.switchers:first-child').animate({
      left: '5px'
    }, 500);
    $('.switchers:last-child').animate({
      right: '5px'
    }, 500);
    isSwitched = false;
  }
})

* {margin: 0;padding: 0;}
main {
  background-color: #121212;
  width: 100vw;
  height: 100vh;
}
.switcher {
  position: absolute;
  width: 150px;
  height: 25px;
  border: 1px solid #fff;
  right: 45vw;
  top: 45vh;
}
.switchers {
  width: 60px;
  height: 15px;
  border: 1px solid #fff;
  position: absolute;
  top: 4px;
  cursor: pointer;
}
.switchers:first-child {
  left: 5px;
  background-color: #fbfbfb;
}
.switchers:last-child {right: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="switcher">
    <div class="switchers"></div>
    <div class="switchers"></div>
  </div>
</main>

БЛОГ НА HUSL

Как с анимацией движения поменять местами два блока?

Ответы (1 шт):