I m trying to make a text that is inside the border of an input to move then disappear after 0,5s, so I can have some animation.
Here is how it looks, I made a logic so if I don’t have any value, the text in the border will dissapear:
$('input').on('input', function () {
if ($(this).val() !== '') {
if ($(this).parents('.tbi-checkbox').length === 0) {
$(this).parents('.tbi-input-container').find('.tbi-input-label').addClass('tbi-visible-label');
$(this).parents('.tbi-input-container').find('.tbi-input-label').animate({ top: '-9px' }, 100)
}
} else {
if ($(this).parents('.tbi-checkbox').length === 0) {
$(this).parents('.tbi-input-container').find('.tbi-input-label').animate({ top: '3px' }, 100);
setTimeout(function() {
$(this).parents('.tbi-input-container').find('.tbi-input-label').css("display", "none");
$(this).parents('.tbi-input-container').find('.tbi-input-label').removeClass('tbi-visible-label');
}, 500);
}
}
});
}
By default the text, have the display property set to none, so it can be invisible if the field is empty. What I managed to do until now is to do an animation for the text, when you insert text and looks great. But because I’m removing the class, the animation don’t have time to trigger, so I put it inside a setTimeout function, but it still doesn’t work.
Here is the css:
.tbi-visible-label {
position: absolute;
left: 20px;
top: -9px;
z-index: 1;
display: block;
height: 15px;
margin-left: 5px;
background-color:white;
font-weight: 400;
font-size: 10px;
line-height: 16px;
}
.tbi-input-label {
pointer-events: none;
display: none;
font-family: Inter;
font-weight: normal;
font-size: 12px;
line-height: 16px;
padding: 0 5px;
}