如何将JS动画限制为您单击的输入字段，而不是全部?

Question

弄乱了在此代码笔中找到的下颚破坏者式输入动画

代码笔只有一个字段，但如果你添加第二个，就像这样......

<div class="container">
<p class="lb">username</p>
<p class="placeholder">username</p>
<input type="text" />
<div class="border"></div>
</div>
<div class="container2">
<p class="lb">username2</p>
<p class="placeholder">username2</p>
<input type="text" />
<div class="border"></div>
</div>

然后添加此 CSS，以便第二个字段向下移动到第一个字段下方...

.container2 {
position: absolute;
top: 75%;
left: 50%;

width: 250px;
height: 50px;

transform: translate(-50%, -50%);
overflow: hidden;
}

您将看到，当您单击任一输入字段时，所需的动画将发生在两个输入字段上。

那么我如何更改 JS 以使其只发生在您单击的输入字段中？

Answer 1

您可以使用$.parent()获取父项，然后相对于单击input的父项定位.placeholder、.border和.lb。

$('input[type=text]').blur(function(){
$parent = $(this).parent();
$parent.find('.placeholder').removeClass("placeholder--animate");
$parent.find('.border').removeClass("border--animate");
$parent.find('.lb').removeClass("lb--animate");
checkInput($(this));
})
.focus(function() {		
$parent = $(this).parent();
$parent.find('.placeholder').addClass("placeholder--animate");
$parent.find('.border').addClass("border--animate");
$parent.find('.lb').addClass("lb--animate");
checkInput($(this));
});
function checkInput($input) {
if ( $input.val()) {
$input.prev('.placeholder').css('display', 'none');
} else {
$input.prev('.placeholder').css('display', 'visible');
}
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);
body {
font-family: 'Open Sans', sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
input[type=text] {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: transparent;
color: #7f8c8d;
font-weight: 600;
outline: none;
border: none;
border-bottom: 1px solid #bdc3c7;
}
.placeholder {
position: absolute;
bottom: 5px;
left: 0;
margin: 0;
font-size: 13px;
color: #95a5a6;
transition: .2s all ease-out;
}
.lb {
position: absolute;
top: 10px;
left: -30px;
z-index: 40;
margin: 0;
font-size: 10px;
color: #3498db;
opacity: 0;
transition: .2s all ease-out;
}
.lb--animate {
opacity: 1;
left: 0;
}
.placeholder--animate {
left: 20px;
opacity: 0;
}
.border {
position: absolute;
bottom: 0px;
display: inline-block;
width: 0;
height: 2px;
padding: 0;
margin: 0;
background-color: #3498db;
transition: .2s width ease-out;
}
.border--animate {
width: 100%;
}
.container2 {
position: absolute;
top: 75%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="lb">username</p>
<p class="placeholder">username</p>
<input type="text" />
<div class="border"></div>
</div>
<div class="container2">
<p class="lb">username2</p>
<p class="placeholder">username2</p>
<input type="text" />
<div class="border"></div>
</div>