How to make only 1 input box do animation on focus using Jquery

Question

Fiddle And Code:

 $(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> 

As you can see, If I click on 1 input box, then the other one also do the same animation. How can i make only the clicked input box do this animation.

Expected Result:

1. On click, the fake placeholder will go up (only the clicked one)
2. The fake placeholder will stay up, if the input box has some value.

Answer 1

Use $(this).next(".fakeplaceholder") .

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

It will target the next element with the class fakeplaceholder right after the input you focus

 $(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> 

Answer 2

 $(document).ready(function(){ $("input").focus(function(){ $(this).next().addClass("fakeplaceholdertop"); }); $("input").change(function(){ if($(this).val()==""){ $(this).next().removeClass("fakeplaceholdertop"); }else{ $(this).next().addClass("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/2.1.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> 

Answer 3

You are applying animation to all matching elements. Use this to target current element to perform the animation. Try using this

$(this).parent().find(".fakeplaceholder").addClass("fakeplaceholdertop");

$(this).parent().find(".fakeplaceholder").removeClass("fakeplaceholdertop");

Answer 4

You just have to add separate ID's to access the different fields.

<span class="fakeplaceholder" id="first">First Name</span>
<span class="fakeplaceholder" id="last">Last Name</span>

Then apply the fakeplaceholdertop class to the specific element.

$(".firstname").focus(function() {
    $("#first").addClass("fakeplaceholdertop");
});

$(".lastname").focus(function() {
    $("#last").addClass("fakeplaceholdertop");
});