如何將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>