[英]How to make only 1 input box do animation on focus using Jquery
$(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. 如您所见,如果我单击1个输入框,则另一个也将执行相同的动画。 How can i make only the clicked input box do this animation. 我如何才能仅使单击的输入框执行此动画。
Expected Result: 预期结果:
Use $(this).next(".fakeplaceholder")
. 使用$(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 fakeplaceholder
您关注的输入之后, 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>
$(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>
You are applying animation to all matching elements. 您正在将动画应用于所有匹配的元素。 Use this
to target current element to perform the animation. 使用this
来定位当前元素以执行动画。 Try using this 试试这个
$(this).parent().find(".fakeplaceholder").addClass("fakeplaceholdertop");
$(this).parent().find(".fakeplaceholder").removeClass("fakeplaceholdertop");
You just have to add separate ID's to access the different fields. 您只需添加单独的ID即可访问不同的字段。
<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. 然后将fakeplaceholdertop类应用于特定元素。
$(".firstname").focus(function() {
$("#first").addClass("fakeplaceholdertop");
});
$(".lastname").focus(function() {
$("#last").addClass("fakeplaceholdertop");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.