Сделал бегающую кнопку по клику, при этом не могу добавить плавность её перемещения.
Пробую 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="your@email.com" class="in_ft">
<button type="submit" class="btn_ft">
subscribe
</button>
<img src="img/img_inp.png" alt="img" class="img_inp">
</div>
</form>