Как сделать плавное перемещение кнопки?

Question

Сделал бегающую кнопку по клику, при этом не могу добавить плавность её перемещения.

Пробую transition, но не помогает, пробовал метод animate() в jquery, но он работает только в одну сторону, а при обратном клике кнопка стоит на месте.

Ограничился простым добавлением и удалением класса по клику, но это не 100%-е решение задачи, плавности нет.

Мой код:

$(function() {

  $(".btn_ft").click(function(e) {

    e.preventDefault();

    $(this).toggleClass("left");


    if (!$(this).data('status')) {
      $(this).html('success');
      $(this).data('status', true);
    } else {
      $(this).html('subscribe');
      $(this).data('status', false);
    }


    $(".in_ft").val('').toggleClass("bgc");

    $(".img_inp").toggleClass("img_none");

  });



});

.form_ft {
  justify-content: center;
}

.box_log {
  width: 100%;
  max-width: 500px;
  height: 62px;
  border-radius: 50px;
  border: 1px solid #706965;
  position: relative;
}

.in_ft {
  width: 100%;
  max-width: 100%;
  border-radius: 50px;
  border: none;
  outline: none;
  background-color: rgba(255, 255, 255, 0.1);
  padding-left: 70px;
  color: #fff;
  font-size: 18px;
}

.btn_ft {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 100%;
  max-width: 120px;
  height: 50px;
  border: none;
  outline: none;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  background-color: #e94e38;
  transition: all .6s;
  cursor: pointer;
}

.img_inp {
  position: absolute;
  left: 35px;
  top: 50%;
  transform: translateY(-50%);
}

.btn_ft:hover {
  background-color: dodgerblue;
}

.left {
  left: 5px;
}

.bgc {
  background-color: #3c3c3c;
}

.img_none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" class="form_ft">

  <div class="box_log">

    <input type="text" placeholder="[email protected]" class="in_ft">

    <button type="submit" class="btn_ft">
        subscribe
    </button>

    <img src="img/img_inp.png" alt="img" class="img_inp">

  </div>

</form>

Answer 1

Можно так:

    $(function() {

        $(".btn_ft").click(function(e) {

            e.preventDefault();

            if($(this).hasClass("left") == true){
                $(this).removeClass("left");
                $(this).addClass("right");
            } else if ($(this).hasClass("right") == true) {
                $(this).removeClass("right");
                $(this).addClass("left");
            } else {
                $(this).addClass("left");
            }

            if (!$(this).data('status')) {
                $(this).html('success');
                $(this).data('status', true);
            } else {
                $(this).html('subscribe');
                $(this).data('status', false);
            }



            $(".in_ft").val('').toggleClass("bgc");

            $(".img_inp").toggleClass("img_none");

        });
    });

    .form_ft {
        justify-content: center;
    }

    .box_log {
        width: 100%;
        max-width: 500px;
        height: 62px;
        border-radius: 50px;
        border: 1px solid #706965;
        position: relative;
    }

    .in_ft {
        width: 100%;
        max-width: 100%;
        border-radius: 50px;
        border: none;
        outline: none;
        background-color: rgba(255, 255, 255, 0.1);
        padding-left: 70px;
        color: #fff;
        font-size: 18px;
    }

    .btn_ft {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 100%;
        max-width: 120px;
        height: 50px;
        border: none;
        outline: none;
        border-radius: 50px;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 16px;
        text-transform: uppercase;
        background-color: #e94e38;
        transition: transform .6s;
        cursor: pointer;

    }

    .img_inp {
        position: absolute;
        left: 35px;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn_ft:hover {
        background-color: dodgerblue;
    }

    .left {
        left: 5px;
        animation: left1 2s;
    }
    @keyframes left1 {
        0% {
            transform: translate3d(300%, 0%, 0px);
            animation-timing-function: ease-in;
        }
        100% {
            transform: translate3d(0%, 0%, 0px);
        }
    }

    .right {
        right: 5px;
        animation: right1 2s;
    }
    @keyframes right1 {
        0% {
            transform: translate3d(-300%, 0%, 0px);
            animation-timing-function: ease-in;
        }
        100% {
            transform: translate3d(0%, 0%, 0px);
        }
    }

    .bgc {
        background-color: #3c3c3c;
    }

    .img_none {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" class="form_ft">

    <div class="box_log">

        <input type="text" placeholder="[email protected]" class="in_ft">

        <button type="submit" class="btn_ft">
            subscribe
        </button>

        <img src="img/img_inp.png" alt="img" class="img_inp">

    </div>

</form>

БЛОГ НА HUSL

Как сделать плавное перемещение кнопки?

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