如何使用Jquery只使1个输入框在焦点上做动画

Question

小提琴和代码:

$(document).ready(function(){
    $("input").focus(function(){
        $(".fakeplaceholder").addClass("fakeplaceholdertop");
    });
    
    
    $("input").blur(function(){
    
    if(!$('input').val()) {
        $(".fakeplaceholder").removeClass("fakeplaceholdertop");
        }
    });
});

.accountbox {
   	background-color:#ffffff;
	
	padding: 15px 120px 50px 50px;	
}

:focus{outline: none;}

.input1div {
	display:inline-block;  position: relative;
}

.input1div input {
	font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}

.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}

.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}


.fakeplaceholder {
  position: absolute;
  pointer-events: none;
  top: 10px;
  color:#8c8c8c;
  transition: 0.28s ease all;
}

.fakeplaceholdertop {
  top: -10px;
  font-size:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div class="accountbox">

    <p style="font-size:25px;font-weight:600;">Sign Up</p>
                
    <form class="accountform">
				    
        <div class="input1div">
        
            <input class="firstname" type="text" name="firstname" />
						<span class="fakeplaceholder">First Name</span>
					  <span class="focus-border"></span>
        </div>
				
        <br/><br/><br/>
				
        <div  class="input1div">
            
            <input type="text" name="lastname" />
						<span class="fakeplaceholder">Last Name</span>
					  <span class="focus-border"></span>
				</div>
					
    </form>

</div>

如您所见,如果单击1输入框,则另一个也会执行相同的动画.如何才能使点击的输入框执行此动画.

预期结果:

1. 点击后,假占位符将上升(仅点击一个)
2. 如果输入框有一些值,假占位符将保持不变.

Answer 1

使用$(this).next(".fakeplaceholder").

$("input").focus(function() {
  $(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
  if (!$('input').val()) {
    $(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
  }
});

它将fakeplaceholder在您关注的输入后立即定位具有类的下一个元素

$(document).ready(function() {
  $("input").focus(function() {
    $(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
  });
  $("input").blur(function() {
    if (!$(this).val()) {
      $(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
    }
  });
});

.accountbox {
  background-color: #ffffff;
  padding: 15px 120px 50px 50px;
}

:focus {
  outline: none;
}

.input1div {
  display: inline-block;
  position: relative;
}

.input1div input {
  font: 15px/24px "Lato", Arial, sans-serif;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 1px;
}

.input1div input {
  border: 0;
  padding: 7px 0;
  border-bottom: 1px solid #ccc;
}

.input1div input~.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3399FF;
  transition: 0.4s;
}

.input1div input:focus~.focus-border {
  width: 100%;
  transition: 0.4s;
}

.fakeplaceholder {
  position: absolute;
  pointer-events: none;
  top: 10px;
  color: #8c8c8c;
  transition: 0.28s ease all;
}

.fakeplaceholdertop {
  top: -10px;
  font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div class="accountbox">

  <p style="font-size:25px;font-weight:600;">Sign Up</p>

  <form class="accountform">

    <div class="input1div">

      <input class="firstname" type="text" name="firstname" />
      <span class="fakeplaceholder">First Name</span>
      <span class="focus-border"></span>
    </div>

    <br/><br/><br/>

    <div class="input1div">

      <input type="text" name="lastname" />
      <span class="fakeplaceholder">Last Name</span>
      <span class="focus-border"></span>
    </div>

  </form>

</div>