Перемещение элементов и их возврат на исходную позицию jQuery

Question

Есть кнопка и текст привязанный к ней. Необходимо написать код, чтобы при нажатии на кнопку, текст сдвигался направо на 35px, и при повторном нажатии возвращался на исходную позицию. В голове понимаю что надо добавить класс с новой позицией, и по кнопке добавлять или исключать его, но выполнить не могу

$('#button3').click(function () {
            $('.three').css({
                'position': 'relative',
                'left': '35px'
            });

Answer 1

$(".btn").on("click", function() {
  $(".text").toggleClass("textMove")

})

.textMove {
  margin-left: 35px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, repudiandae, harum! Inventore veniam aperiam recusandae illum laboriosam accusamus, quia voluptatum obcaecati aliquid voluptate tempore delectus eum, quam sed, facilis a cumque harum possimus
  dignissimos nihil asperiores, nisi blanditiis aliquam optio amet. Amet totam rerum earum reprehenderit impedit, harum, a iusto.</div>
<button class="btn">Кнопка</button>

Можно так, хотя очень не оптимально, и непонятно зачем вам это надо

Answer 2

В таком случае вам нужно как-то проверять состояние на текущий момент и относительно него менять.
Допустим мы будем проверять, есть ли отступ в 35px, если нет то выставить

let text = $('.three');

$('#button3').click(function () {
  let check = text.css('left') === '35px'; // Если установлено left: 35px то true, иначе false
  // Если текст не содержит отступ, то мы его добавляем, иначе возвращаем значения по умолчанию
  text.css({
    'position': check === false ? 'relative' : '',
    'left': check === false ? '35px' : ''
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, repudiandae, harum! Inventore veniam aperiam recusandae illum laboriosam accusamus, quia voluptatum obcaecati aliquid voluptate tempore delectus eum, quam sed, facilis a cumque harum possimus
  dignissimos nihil asperiores, nisi blanditiis aliquam optio amet. Amet totam rerum earum reprehenderit impedit, harum, a iusto.</div>
<button id="button3">Кнопка</button>

БЛОГ НА HUSL

Перемещение элементов и их возврат на исходную позицию jQuery

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