Передвижение div блока jquery

Question

Есть несколько див блоков, стоящих в ряд с float:left.. Нужно чтобы див по клику кнопки уезжал на соседнее место и при этом другие блоки оставались на местах.

Сейчас использую

$("#div").animate({margin-left: "150px" }, 900);

Но при этом другие блоки съезжают вниз.

Answer 1

Используйте transform.

function shift(distance) {
  document.getElementById('movable').style.transform = 'translatex(' + distance + ')';
}

div {
  width: 30%;
  height: 100px;
  background: pink;
  float: left;
  text-align: center;
  line-height: 100px;
  border: 1px solid red;
  transition-duration: 0.5s;
  margin-right:5px;
}

<button onclick="shift('150px')">click</button>
<hr>
<div id="movable">1</div>
<div>2</div>
<div>3</div>

Answer 2

Есть 3 блока (квадрата) одинаковых по размеру и свойствам. Но по клику кнопки один (самый левый) должен наезжать и перекрывать центральный. Но при этом 2 правых блока уходят вправо, а не остаются на месте. Проблема в вёрстке, но делать position:absolute - не вариант. Вёрстка разваливается.

Прошу прощения, но какой вопрос, такой и ответ. Я это понял следующим образом:

$("button").click(function() {
  $('.blocks').find("div").first().addClass("goo");
  $('.blocks>div').not(':first').not(':last').removeClass("goo").delay(600).animate({
    "margin-left": "130px"
  }, 500, function() {});
});

.blocks {
  position: relative;
}

.blocks>div {
  display: inline-block;
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: chocolate;
  transition: all 0.5s;
}

.blocks>div:nth-child(1) {
  background-color: red;
}

.blocks>div:nth-child(2) {
  background-color: blue;
}

.blocks>div:nth-child(3) {
  background-color: green;
}

.blocks .goo {
  transform: translateX(120px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Кнопка</button>
<div class="blocks">
  <div></div>
  <div></div>
  <div></div>
</div>

БЛОГ НА HUSL

Передвижение div блока jquery

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